how to use multiple jquery-ui sliders as filters

Question

i have this jsfiddle http://jsfiddle.net/danieltulp/gz5gN/

what i want to do is fiter a unordered list on data- properties with about 6 sliders. but for my development i'm just using two

first question: the quality slider works just fine, but when i slide the price slider it sees the minP and maxP variables as objects, why? how can i fix that?

second question: my code is now pritty messy, i have to write code specific to each filter (ie: price, quality, etc), how can i simplify/shorten my code?

Code from fiddle:

Html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">
    price<br />
    <div id="price"></div>
    quality<br />
    <div id="quality"></div>
    <ul id="products">
        <li data-price="10" data-quality="20"> product - £10 q20</li>
        <li data-price="50" data-quality="40"> product - £50 q40</li>
        <li data-price="100" data-quality="80"> product - £100 q80</li>
        <li data-price="150" data-quality="30"> product - £150 q30</li>
        <li data-price="200" data-quality="40"> product - £200 q40</li>
    </ul>
</div>

Javascript

function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 250,
        values: [0, 250],
        slide: function(event, ui) {
            if(event.target.id = "price"){
                var minP = ui.values[0],
                      maxP = ui.values[1],
                      minQ = $("#quality").slider("values", 0),
                      maxQ = $("#quality").slider("values", 1);
             }
            if(event.target.id = "quality"){
                var minP = $("#price").slider("values", 0),
                      maxP = $("#price").slider("values", 1),
                       minQ = ui.values[0],
                       maxQ = ui.values[1];
              }
              alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
              showProducts(minP, maxP, minQ, maxQ);
          }
      };

     $("#price").slider(options);
     $("#quality").slider(options);
  });

Edit: The first problem with the min max variables being objects also happens to the quality slider if I move the if statement of quality above the one for price. Price values are then correct. So it appears to be a problem with the if statements in the slide function.

Answer 1

it appears there is a very handy jquery plugin called filter.js

demo: http://jiren.github.com/filter.js/filterjs.html

github: https://github.com/jiren/filter.js

tutorial: http://blog.joshsoftware.com/2011/09/28/filter-js-client-side-search-filtering-using-json-and-jquery/

Answer 2

it appears that changing the slide event to change allows me to use

change: function(event, ui) {
        var minP = $("#price").slider("values", 0);
        var maxP = $("#price").slider("values", 1);
        var minQ = $("#quality").slider("values", 0);
        var maxQ = $("#quality").slider("values", 1);
        showProducts(minP, maxP, minQ, maxQ);
    }

this was not possible with the slide event as these statements then took the old values as the slide event is triggered during sliding (tested on iPad, am not sure how this works with actual mouse) see http://jqueryui.com/demos/slider/#event-slide for more info

working jsfiddle http://jsfiddle.net/danieltulp/gz5gN/42/

now I still need to simplify/shorten my code

---

edit:

i have an idea for making at least clearer code

first i need to determing whether the slidervalue has increased or decreased then i can filter for only shown or hidden list items to either hide or show

this allows to only effect already filtered list items so i don't need to hide them again as i was doing in my previous code

but my jsfiddle breaks on something in my code but i can't narrow it down, any ideas? http://jsfiddle.net/danieltulp/4uF3e/4/