Фильтр цены с бегунком

Актуально для версии 2.9

Задача

На примере шаблона demodizzy сделать в каталоге фильтрацию по цене с бегунком

Решение

Для задачи мы нашли готовое решение http://jqueryui.com/slider/#range

Осталось только адаптировать его для нашего шаблона.

Для этого:

1)

				<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8">
 $(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 10000,
values: [ 0, 10000 ],
slide: function( event, ui ) {
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount1" ).val($( "#slider-range" ).slider( "values", 0 ));
$( "#amount2" ).val($( "#slider-range" ).slider( "values", 1 ));
}
);