This article has moved to a new home. View the updated version News and Tips

Price Slider feature


[%product_filter type:'price' limit:'1'%]
[%param header%]
Filter By Price Range
[%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] );
<p id="price-range"></p>
[%if [@selected@]%]
<p id="price-range-text" class="price_range"></p>
<p id="price-range-text" class="price_range"></p>
<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>
This slider utilises the Jquery tools library and currently does not support a touch interfaces

Was this article useful?

Be notified when this page is updated. Optional.