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 filter even more accurately. I was trying to do that but nothing works. I would be thankful fo any help.

Here's jsfiddle example: 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:

I did it by myself. Was quite easy.

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

来源：https://stackoverflow.com/questions/51916081/adding-range-slider