@Alex-Broudy

Как сделать фильтрацию элементов как на ionRangeSlider, но используя noUiSlider?

Сайт на Вордпресс.
Есть решение которое на странице фильтрует элементы по сумме (стоимости). Используется 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>
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы