添加范围滑块

Posted 2023-03-13

【中文标题】添加范围滑块

【英文标题】：Adding range slider

【发布时间】：2018-08-19 08:58:13

【问题描述】：

我在将第二个滑块添加到优惠过滤器时遇到问题。现在有一个滑块和复选框来过滤产品。但此时我需要添加额外的范围滑块以更准确地过滤。我试图这样做，但没有任何效果。如有任何帮助，我将不胜感激。

这是 jsfiddle 示例：https://jsfiddle.net/27zo8eL3/4/

html：

       <ul class="tabela lokata" id="products">
            <li class="tabelki" data-price="10000" data-quality="1" data-category="1 2 3 4 ">max 10 000 USD contains category 1 2 3 4 and quality 1</li>
            <li class="tabelki" data-price="12000" data-quality="2" data-category="2 3">max 12 000 USD contains category 2 3 and quality 2</li>
            <li class="tabelki" data-price="13000" data-quality="3" data-category="4 5">max 13 000 USD contains category 4 5 and quality 3 </li>
            <li class="tabelki" data-price="14000" data-quality="4" data-category="5 6 ">max 14 000 USD contains category 5 6 and quality 4</li>
            <li class="tabelki" data-price="12000" data-quality="5" data-category="5">max 12 000 USD contains category 5 and quality 5</li>
            <li class="tabelki" data-price="14000" data-quality="6" data-category="1 2">max 14 000 USD contains category 1 2 and quality 6</li>
            <li class="tabelki" data-price="16000" data-quality="7" data-category="1 2 3">max 16 000 USD contains category 1 2 3 and quality 7</li>
            <li class="tabelki" data-price="20000" data-quality="8" data-category="7 8">max 20 000 USD contains category 7 8 and quality 8</li>

        </ul>

JS：

  function filterPrice(products) 
      let minP = $("#price").slider("values", 0);
      let maxP = $("#price").slider("values", 1);
      return products.filter(function() 
        let value = parseInt($(this).data("price"), 10);
        return !(value > maxP || value < minP);
      );
    

    function filterCheckboxes(products) 
      checkboxes = $("input:checked").filter(function() 
        return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
      ).map(function() 
        return this.value;
      );


      // If no checkboxes are checked, don't filter with them
      if (checkboxes.length == 0) 
        return products;
      

      return products.filter(function() 
        categories = $(this).data("category").toString().split(" ");
        let val = true;
        checkboxes.each(function() 
          if (!categories.includes(this[0])) 
            val = false;
            return;
          
        );
        return val;
      );

    

    function filterProducts() 
      // Reset filters
      products = $("#products li");
      products.hide();
      products = filterPrice(products);
      products = filterCheckboxes(products);
      products.show();

      let numItems = products.length;

      if (numItems > 0) 
        label = "We found " + numItems + " offers. ";
       else 
        label = "No result found.";
      

      $("#found").text(label);
    

    $(function() 
  var options = 
    range: true,
    min: 1,
    max: 60,
    step: 1,
    values: [1, 24],
    slide: function(event, ui) 
      $("#amount2").val(ui.values[0] + " - " + ui.values[1]);
    ,
    change: function(event, ui) 
      showProducts();
    

  ;

  $("#quality").slider(options);
  $("#amount2").val($("#quality").slider("values", 0) +
    " - " + $("#quality").slider("values", 1));
);

    $(function() 
      let options = 

        min: 500,
        max: 100000,
        step: 500,
        values: [10000],
        slide: function(event, ui) 
          $("#amount").val(ui.values[0] + " USD");
        ,
        change: function(event, ui) 
          filterProducts();
        

      ;

      $("input").filter(function() 
        return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
      ).change(filterProducts);

      $("#price").slider(options);
      $("#amount").val($("#price").slider("values", 0) + " USD");

    );

【参考方案1】：

我自己做的。很容易。

function filterQuality(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);
      );
    

【参考方案2】：

多个滑块 DEMO

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

HTML

<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;

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>');
   );