jQuery Range Filter - Multiple Slider

Range Slider with multiple options

by Suryar Praveen

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <h4>Minutes</h4>
<div id="data-range"></div>

      <h4>Price</h4>
      <div id="price-range"></div>

CSS

.ui-draggable, .ui-droppable {
	background-position: top;
}
.ui-widget-header {background: #006fba;}
.value {    position: absolute;    top: 30px;    left: 50%;    margin: 0 0 0 -20px;    width: 40px;    text-align: center;    display: block;    font-weight: normal;}

JavaScript

$( function() {
    $( "#data-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 20, 60 ],
      slide: function( event, ui ) {
       $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
       $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
      }
    });
     $( "#price-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 50, 70 ],
      slide: function( event, ui ) {
       $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
       $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
      }
    });
    
    $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#data-range').slider('values', 0) + '</span>');
    $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#data-range').slider('values', 1) + '</span>');
    
    $('.ui-slider-handle:eq(2)').append('<span class="price-range-min value">$' + $('#price-range').slider('values', 0) + '</span>');
    $('.ui-slider-handle:eq(3)').append('<span class="price-range-max value">$' + $('#price-range').slider('values', 1) + '</span>');
  } );