Price Slider feature

A popular slider scale for the price range filter

This slider utilises the Jquery tools library and currently does not support a touch interfaces.

Example

[%product_filter type:'price' limit:'1'%]
[%param header%]Filter By Price Range[%/param%]
[%param *body%]
[%SITE_VALUE id:'footer_javascript'%]
    <script type="text/javascript">
        $(function() {
            var vals = ['[@min@]','[@max@]'];
            for(var i=0; i<vals.length; i++) {
                vals[i]=parseInt(vals[i]);
            }
            $( "#price-range" ).slider({
                range: true,
                min: vals[0],
                max: vals[1],
                values: vals,
                slide: function( event, ui ) {
                    $( "#price-range-text" ).html( '
+ui.values[0]+' to 
+ui.values[1] );
                    $( '#pricesearch input[name="pr"]' ).val( ui.values[0]+'-'+ui.values[1]);
                },
                create: function( event, ui ) {
                    $( "#price-range-text" ).html( '
+vals[0]+' to 
+vals[1] );
                    $( '#pricesearch input[name="pr"]' ).val( vals[0]+'-'+vals[1] );
                }
            });
        });
    </script>
[%END SITE_VALUE%]
<p id="price-range"></p>
[%if [@selected@]%]
    <p id="price-range-text" class="price_range"></p>
[%else%]
    <p id="price-range-text" class="price_range"></p>
[%/if%]
                                                                                            <form id="pricesearch" method="get" action="[@config:current_url@]">
    <input type="hidden" name="rf" value="[%filter_code id:'price'/%]">
    <input  name="pr" type="hidden" value="">
    <input type="submit" value="Filter By Price" class="btn btn-default btn-xs" />        
    <a href="[@remove_url@]" class="btn btn-default btn-xs" rel="nofollow"> clear</a>
</form>
[%/param%]
[%/product_filter%]

Was this article useful?

Be notified when this page is updated. Optional.