jQuery price slider filter

jquery, jquery-ui, jquery-ui-slider

Solution

I would make a few changes:

Give your list of products an `id` attribute and give each product a `data-price` attribute that is equal to the price of the item:

<ul id="products">
    <li data-price="10"> product - £10 </li>
    <li data-price="50"> product - £50 </li>
    <li data-price="100"> product - £100 </li>
    <li data-price="150"> product - £150 </li>
    <li data-price="200"> product - £200 </li>
</ul>

Add a function that will show or hide those products when a `slide` event occurs:

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

Call that function from the `slide` event handler:

slide: function(event, ui) {
    var min = ui.values[0],
        max = ui.values[1];

    $("#amount").val("$" + min + " - $" + max);
    showProducts(min, max);
}

Also call that function right after the slider is initialized so that the correct products are hidden initially:

var options = {
   /* snip */
}, min, max;

$("#slider-range").slider(options);

min = $("#slider-range").slider("values", 0);
max = $("#slider-range").slider("values", 1);

$("#amount").val("$" + min + " - $" + max);

showProducts(min, max);

The entire snippet:

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val("$" + min + " - $" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});​

Example: http://jsfiddle.net/5aPg7/

Problem

Original source