CodePen Embed - Multi range input with histogram

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>

 	<div class="easy-basket-filter">
	
		<div class="easy-basket-filter-histogram">
			<ul class="histogram-list">
				<li price-range-from="0" price-range-to="1000">
                	<div class="histogram-ballon">цена</div>
					<div class="histogram-height" style="height:76.85714285714286%;">
					</div>
				</li>
				<li price-range-from="1001" price-range-to="2000">
                	<div class="histogram-ballon">в этом диапазоне 35 товаров</div>
					<div class="histogram-height" style="height:10.0%;">
					</div>
				</li>
				<li price-range-from="2001" price-range-to="3000">
                	<div class="histogram-ballon">цена</div>
					<div class="histogram-height" style="height:12.57142857142857%;">
					</div>
				</li>
				<li price-range-from="3001" price-range-to="4000">
                	<div class="histogram-ballon">цена</div>
					<div class="histogram-height" style="height:56.285714285714285%;">
					</div>
				</li>
				<li price-range-from="4001" price-range-to="5000">
                	<div class="histogram-ballon">цена</div>
					<div class="histogram-height" style="height:87.14285714285714%;">
					</div>
				</li>
			</ul>
		</div>
	
	
		<div class="easy-basket-filter-info">
			<p class="iLower"><input type="text" class="easy-basket-lower" value="0" min="0" max="5000" maxlength=6/></p>
			<p class="iUpper"><input type="text" class="easy-basket-upper" value="5000" min="0" max="5000" maxlength=6/></p>
		</div>
		
		<div class="easy-basket-filter-range">
			<input type="range" class="lower range" step="any" min="0" max="5000" value="0"/>
			<input type="range" class="upper range" step="any" min="0" max="5000" value="5000"/>
			<div class="fill"></div>
		</div>
		
		<div class="easy-basket-filter-ticks">
			<div data-value="0"></div><div data-value="100"></div><div data-value="200"></div><div data-value="300"></div><div data-value="400"></div><div data-value="500"></div><div data-value="600"></div><div data-value="700"></div><div data-value="800"></div><div data-value="900"></div><div data-value="1000"></div><div data-value="1100"></div><div data-value="1200"></div><div data-value="1300"></div><div data-value="1400"></div><div data-value="1500"></div><div data-value="1600"></div><div data-value="1700"></div><div data-value="1800"></div><div data-value="1900"></div><div data-value="2000"></div><div data-value="2100"></div><div data-value="2200"></div><div data-value="2300"></div><div data-value="2400"></div><div data-value="2500"></div><div data-value="2600"></div><div data-value="2700"></div><div data-value="2800"></div><div data-value="2900"></div><div data-value="3000"></div><div data-value="3100"></div><div data-value="3200"></div><div data-value="3300"></div><div data-value="3400"></div><div data-value="3500"></div><div data-value="3600"></div><div data-value="3700"></div><div data-value="3800"></div><div data-value="3900"></div><div data-value="4000"></div><div data-value="4100"></div><div data-value="4200"></div><div data-value="4300"></div><div data-value="4400"></div><div data-value="4500"></div><div data-value="4600"></div><div data-value="4700"></div><div data-value="4800"></div><div data-value="4900"></div><div data-value="5000"></div>
		</div>
		
	</div>

body {
  padding: 20% 0;
  font: 15px Open Sans;
}
.easy-basket-filter {
	width: 50%;
	margin: 100px 25%;
	position: relative;
}
.fill {
	height: 3px;
	width: 100%;
	background-color: #01BAB0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.easy-basket-filter-info {
	box-sizing: border-box;
	padding: 0;
	width: 100%;
	justify-content: space-between;
	position: absolute;
	top: -50px;
}
.easy-basket-filter-info p{
	color: #fff;
	padding: 2px 6px;
	background-color: #01BAB0;
	border-radius: 4px;
	margin:0;
}
.easy-basket-filter-info .iLower{
	float:left;
	display: inline-block;
}
.easy-basket-filter-info .iUpper{
	float:right;
	display: inline-block;
}
/* .easy-basket-filter-info p:after{
	border-color: #01BAB0 transparent transparent;
	content: "";
	position: absolute;
	bottom: -3px;
	border-color: #01BAB0 transparent transparent;
	border-style: solid;
	border-width: 3px 4px;
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
	font-size: 15px;
}
.easy-basket-filter-info .iLower:after{
	left: 9px;
}
.easy-basket-filter-info .iUpper:after{
	right: 1px;
} */
.easy-basket-filter-info input{
	width: inherit;
	border: none;
	color: #fff;
	font: 11px Open Sans;
	background-color: #01bab0;
	width: 30px;
	text-align:center;
}
/***** Position dual *****/
.range {
	position: absolute;
	left: 0;
	top: 0;
}

/****** Style range ******/
input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 0;
	background: transparent;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	cursor: pointer;
	position: relative;
	z-index: 3;
}

input[type=range]:focus, input[type=text]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height:20px;
	width: 20px;
	border: 5px solid #f1f1f1;
	box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.5);
	border-radius: 100%;
	background: #01BAB0;
	cursor: pointer;
	margin-top: -9px;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 3px;
	cursor: pointer;
	background: #707D7D;
	border-radius: 1.3px;
}

input[type=range].lower::-webkit-slider-runnable-track {
	background: red;
}
.easy-basket-filter-ticks {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	height: 5px;
	padding-top: 8px;
	font: 11px Open Sans;
	cursor: default;
	left: 0;
	bottom: 0;
	width: 100%;
}
.easy-basket-filter-ticks > div {
	height: 100%;
	width: 1px;
	background: #DDD;
	color: #888;
}
.easy-basket-filter-ticks > div:nth-child(10n - 9) {
	height: 150%;
}
.easy-basket-filter-ticks > div:nth-child(10n - 9)::before {
	display: block;
	content: attr(data-value);
	-webkit-transform: translate(-50%, 50%);
			transform: translate(-50%, 50%);
	text-align: center;
	width: 40px;
}


/* Гистограмма	*/
.easy-basket-filter-histogram{
	width: 100%;
	display: block;
	float: left;
	margin:0;
	top: -51px;
	position: absolute;
}
.easy-basket-filter-histogram ul{
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}
.easy-basket-filter-histogram ul li{
	height: 35px;
	box-sizing: border-box;
	background-color: #f1f1f1;
	width: 20%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	border-right:1px solid #fff;
	float: left;
	position: relative;
	cursor: pointer;
}
.ui-histogram-active{
	background-color: rgba(1, 186, 176, 0.39) !important;
}
.easy-basket-filter-histogram ul li:last-child{
	border-right: 0px;
}
.easy-basket-filter-histogram ul li:hover {
	background-color: rgba(1, 186, 176, 0.39);
}
.easy-basket-filter-histogram ul li:hover > .histogram-ballon{
	display: none;
}
.easy-basket-filter-histogram ul li:hover > .histogram-ballon{
	display: block;
}
.easy-basket-filter-histogram .histogram-ballon{
	background-color: #f1f1f1;
	position: absolute;
	border-radius: 4px;
	font: 12px Arial;
	top: -40px;
	line-height: 18px;
	padding: 2px 6px;
	white-space: nowrap;
	display: none;
}
.easy-basket-filter-histogram .histogram-height{
	background-color: #fff;
}
.easy-basket-filter-histogram .easy-basket-filter-histogram-arrow{
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	overflow: hidden;
	border: 1px solid #ccc;
	background: #FFF;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=.7071067811865475, M12=-.7071067811865477, M21=.7071067811865477, M22=.7071067811865475, SizingMethod='auto expand');
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 58px;
	bottom: -6px;
	border-left: none;
	border-top: none;
	box-shadow: 4px 1px 3px rgba(0,0,0,.09);
	left: 56px\9;
	bottom: -4px\9;
}

jQuery(document).ready(function() {
	$('.upper').on('input', setFill);
	$('.lower').on('input', setFill);

	var max = $('.upper').attr('max');
	var min = $('.lower').attr('min');

	function setFill(evt) {
		var valUpper = $('.upper').val();
		var valLower = $('.lower').val();
		if (parseFloat(valLower) > parseFloat(valUpper)) {
			var trade = valLower;
			valLower = valUpper;
			valUpper = trade;
		}
		
		var width = valUpper * 100 / max;
		var left = valLower * 100 / max;
		$('.fill').css('left', 'calc(' + left + '%)');
		$('.fill').css('width', width - left + '%');
		
		// Update info
		if (parseInt(valLower) == min) {
			$('.easy-basket-lower').val('0');
		} else {
			$('.easy-basket-lower').val(parseInt(valLower));
		}
		if (parseInt(valUpper) == max) {
			$('.easy-basket-upper').val('5000');
		} else {
			$('.easy-basket-upper').val(parseInt(valUpper));
		}
		$('.histogram-list li').removeClass('ui-histogram-active');
	}
	
	// изменяем диапазон цен вручную
	$('.easy-basket-filter-info p input').keyup(function() {
		var valUpper = $('.easy-basket-upper').val();
		var valLower = $('.easy-basket-lower').val();
		var width = valUpper * 100 / max;
		var left = valLower * 100 / max;
		if ( valUpper > 5000 ) {
			var left = max;
		}
		if ( valLower < 0 ) {
			var left = min;
		} else if ( valLower > max ) {
			var left = min;
		}
		$('.fill').css('left', 'calc(' + left + '%)');
		$('.fill').css('width', width - left + '%');
		// меняем положение ползунков
		$('.lower').val(valLower);
		$('.upper').val(valUpper);
	});
	$('.easy-basket-filter-info p input').focus(function() {
		$(this).val('');
	});
	$('.easy-basket-filter-info .iLower input').blur(function() {
		var valLower = $('.lower').val();
		$(this).val(Math.floor(valLower));
	});
	$('.easy-basket-filter-info .iUpper input').blur(function() {
		var valUpper = $('.upper').val();
		$(this).val(Math.floor(valUpper));
	});
	
	$('.histogram-list li').click(function() {
		$('.histogram-list li').removeClass('ui-histogram-active');
		var range_from = $(this).attr('price-range-from');
		var range_to = $(this).attr('price-range-to');
		var width = range_to * 100 / max;
		var left = range_from * 100 / max;
		$('.easy-basket-lower').val(range_from);
		$('.easy-basket-upper').val(range_to);
		$('.fill').css('left', 'calc(' + left + '%)');
		$('.fill').css('width', width - left + '%');
		$('.lower').val(range_from);
		$('.upper').val(range_to);
		$(this).addClass('ui-histogram-active');
	});
});

Run Pen

This Pen is owned by alexandrov on CodePen.

See more by @codyshop on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.