Utworzyłem suwak ceny jquery, ale nie mam pewności, jak filtrować wyniki, aby podczas przesuwania widoczne były tylko produkty o tej wartości w zakresie.

HTML:

<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>
<ul>
        <li> product - £10 </li>
        <li> product - £50 </li>
        <li> product - £100 </li>
        <li> product - £150 </li>
        <li> product - £200 </li>
    </ul>
</div>​

JavaScript:

$(function() {
    var options = 
        {
            range: true,
            min: 0,
            max: 500,
            values: [ 50, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        };

        $( "#slider-range" ).slider(
            options
        );
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });

Moje skrzypce sąhttp://jsfiddle.net/ktcle/uvJ8F/