Joomla - Ползунок цены для модуля фильтра Joomshopping

В стандартном фильтре товаров в компоненте интернет магазина Joomshopping сортировка по цене происходит путем вписывания ценовых диапазонов в два поля - input. Во многих фильтрах эти поля заменены простым ползунком, при перемещении которого значения цен в полях изменяется.

Прочитав интересную статью тут решил прикрутить этот ползунок к стандартному фильтру.

Итоговая картинка как это выглядит у меня (демо пока нет):

Шаг 1.

Создаем в папке шаблона папку модуля фильтра (это в случае когда все модификация хранятся в самом шаблоне)

Акутуально для Joomla 2.5 + JoomShopping 3.11.

Структура папок будет такой вот: site/templates/name_tmpl/html/mod_jshopping_filters/default.php

Открываем этот файлик и дописываем в месте, в котором нужен вывод цены (старый вывод можно пока закоментировать до поры до времени):

<?php if ($show_prices){?>
<span class="filter_price"><?php print JText::_('PRICE')?>:<br/>
<span class="box_price_from"><?php print JText::_('FROM')?>
<input type = "text" class = "inputbox" name = "fprice_from" id="fprice_from" size="7" value="<?php if ($fprice_from>0) print $fprice_from?>" />
</span>
<span class="box_price_to"><?php print JText::_('TO')?>
<input type = "text" class = "inputbox" name = "fprice_to" id="fprice_to" size="7" value="<?php if ($fprice_to>0) print $fprice_to?>" />
</span>
<?php print $jshopConfig->currency_code?>
</span>
<div id="slider"></div>
<?php }?>

Далее, привязываем стили к этому слайдеру (выбирайте для себя какие вам по душе):

/* Ширина слайдера */
#slider { 
width: 200px; 
margin: 15px 0;
}
 
/* Контейнер слайдера */
.ui-slider {
position: relative;
}
 
/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 20px; /* Задаем нужную ширину */
height: 20px; /* и высоту */
background: url(../images/row2.png) no-repeat; 
cursor: pointer
}
 
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
overflow: hidden;
}
 
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
height: 5px; /* задаем высоту согласно дизайна */
}
 
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle { 
top: -10px;
margin-left: -6px;
}
 
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
 
.ui-slider-horizontal .ui-slider-range-min { 
left: 0;
}
 
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
 
/* оформление полосы по которой ходит ползунок */
.ui-widget-content { 
border: 1px solid #D4D4D4;
background: #fff;
}
 
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header { 
border: 1px solid #D4D4D4;
background: #26C00C;
}
 
/* скругление для полосы слайдера */
.ui-corner-all {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

И в самый конец добавляем вызов js скрипта, который всем этим добром управляет: 

<script type="text/javascript">
 
jQuery(document).ready(function() {
 var val1=jQuery("input#fprice_from").val(); 
 var val2=jQuery("input#fprice_to").val();
jQuery("#slider").slider({
 min: 0,
 max: 20000,
 values:[val1,val2],
 range: true,
 stop: function(event, ui) {
 jQuery("input#fprice_from").val(jQuery("#slider").slider("values",0));
 jQuery("input#fprice_to").val(jQuery("#slider").slider("values",1));
 document.jshop_filters.submit();
 },
 slide: function(event, ui){
 jQuery("input#fprice_from").val(jQuery("#slider").slider("values",0));
 jQuery("input#fprice_to").val(jQuery("#slider").slider("values",1));
 }
});
 
jQuery("input#fprice_from").change(function(){
 var value1=jQuery("input#fprice_from").val();
 var value2=jQuery("input#fprice_to").val();
 
 if(parseInt(value1) > parseInt(value2)){
 value1 = value2;
 jQuery("input#fprice_from").val(value1);
 }
 jQuery("#slider").slider("values",0,value1); 
});
 
jQuery("input#fprice_to").change(function(){
 var value1=jQuery("input#fprice_from").val();
 var value2=jQuery("input#fprice_to").val(); 
 if (value2 > 1000) { value2 = 1000; jQuery("input#fprice_to").val(1000)}
 if(parseInt(value1) > parseInt(value2)){
 value2 = value1;
 jQuery("input#fprice_to").val(value2);
 }
 jQuery("#slider").slider("values",1,value2);
});
 });
</script>

 Кроме этого не забываем подключить сам jQuery и JQuery UI (отмечаем галочкой Slider и всё что необходимо для его работы будет отмечено автоматически).

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery-ui-1.8.24.custom.min.js"></script>