CODEWITHSUNDEEP
javascriptjquery
luftgekuhltlover
luftgekuhltlover

Reputation: 117

jQuery slider filtering values

I want to filter some text based on the attribute data-length. For example if the slider is in between the value 15 and 20, I want all the tags to be displayed where the data-length is between these two values and hide the all those that have in the data-length more than 20 or less than 15.

Here is a link what I tried so far but was not successful:

FIDDLE

the jQuery code:

$(function() {
  $('#slider-container').slider({
    range: true,
    min: 0,
    max: 100,
    values: [0, 20],
    create: function() {
      $("#value").val("0 - 20");
    },
    slide: function(event, ui) {
      $("#value").val(" " + ui.values[0] + " - " + ui.values[1]);
      var mi = ui.values[0];
      var mx = ui.values[1];
      filterSystem(mi, mx);
    }
  })
});

function filterSystem(minPrice, maxPrice) {
  $("#computers div.match js-match").hide().filter(function() {
    var price = parseInt($(this).data("data-length"), 10);
    return price >= minPrice && price <= maxPrice;
  }).show();
}

Upvotes: 0

Views: 203

Answers (2)

Napoli
Napoli

Reputation: 1403

In your code there is no #computers id, so your selector won't run. You also do not have a div with the class match nor do you have a js-match node.

I would change your selector from #computers div.match js-match to em.match.js-match

You can also get the data length by using .attr('data-length'), or .data('length')

The result would be:

$("em.match.js-match").hide().filter(function () {
    var price = parseInt($(this).data("length"), 10);
    return price >= minPrice && price <= maxPrice;
}).show();

Upvotes: 2

Anurag Srivastava
Anurag Srivastava

Reputation: 14433

Edit: Also change your selector from $("#computers div.match js-match") to just $(".js-match")

You would simply use $(this).data("length") instead of $(this).data("data-length")

Upvotes: 1

Related Questions