Сайт на Вордпресс.
Есть решение которое на странице фильтрует элементы по сумме (стоимости). Используется ionRangeSlider, но поскольку на сайте в основном используется только noUiSlider, то не хотелось бы его нагружать еще одним плагином.
Подскажите люди добрые кому интересно, как сделать тоже самое только используя noUiSlider?
Мое решение ниже:
В functions.php вызываю фильтр:
function get_filter()
{
$return = '<div class="my_filters">';
$summ_for_filter = (isset($_GET['summ']) && $_GET['summ'] != '') ? $_GET['summ'] : 1000;
$return .= '<div class="price-summ" data-summ="'.$summ_for_filter.'">';
$return .= '<div class="summ_title">';
$return .= 'Укажите стоимость товара, руб.';
$return .= '</div>';
$return .= '<input type="text" id="filter_price" name="example_name" value="" />';
$return .= '</div>';
$return .= '</div>';
return $return;
}
в JS файле:
var filter_price_slider = jQuery("#filter_price").ionRangeSlider({min: 1000,max: 100000,from:jQuery(".price-summ").data('summ'),step:1000,prefix:'до '});
filter_price_slider.on('change',function(e)
{
var summ = jQuery(this).data('from');
var query_obj = parseQuery(location.search);
if(query_obj.summ != undefined && query_obj.summ != '')
{
query_obj.summ = summ;
console.log(jQuery.param(query_obj));
}
else if(location.search != '' && location.search != undefined)
{
query_obj.summ = summ;
}
else
{
query_obj = {'summ':summ};
}
var redirrect = "?" + jQuery.param(query_obj);
setTimeout(function(e){location.href = redirrect},500);
});
в HTML файле:
<div class='tovary'>
<div class='tovar'>
<p>товар-1</p>
<p class="summ_data">2000</p>
</div>
<div class='tovar'>
<p>товар-2</p>
<p class="summ_data">3000</p>
</div>
<div class='tovar'>
<p>товар-3</p>
<p class="summ_data">1400</p>
</div>
<div class='tovar'>
<p>товар-4</p>
<p class="summ_data">6200</p>
</div>
</div>