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

Актуально для версии 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 ));
                                      }
                                     )
                                </script>