Adding Range Slider

I have a problem with adding second slider to the offers filter. There is now one slider and checkboxes to filter products. But at this moment i need to add extra range slider to f

Solution 1:

I did it by myself. Was quite easy.

functionfilterQuality(products) {
      let minQ = $("#quality").slider("values", 0);
      let maxQ = $("#quality").slider("values", 1);
      return products.filter(function() {
        let value = parseInt($(this).data("quality"), 9);
        return !(value > maxQ || value < minQ);
      });
    }

Solution 2:

Multiple Sliders DEMO

https://codepen.io/ssuryar/pen/vYLpzZZ

HTML

<h4>Minutes</h4><divid="data-range"></div><h4>Price</h4><divid="price-range"></div>

CSS

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

JS

$( function() {
    $( "#data-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 50, 75 ],
      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: [ 20, 50 ],
      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>');
  } );