jQuery ползунок выбора диапазона

Дата публикации: 2016-10-28

От автора: приветствую вас, друзья. В этой небольшой статье мы попробуем с вами реализовать ползунок выбора диапазона на jQuery. Это может быть диапазон чего угодно, как правило, такая штука часто используется в интернет-магазинах при поиске и фильтрации товаров. Приступим.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, у нас есть простейшее текстовое поле формы, в которое, как мы предполагаем, пользователь должен ввести минимальную и максимальную цену, т.е. некий диапазон цен, в котором он подыскивает товар.

Теоретически пользователю не составит особого труда ввести такой диапазон. Но на практике все же будет проще подсказать пользователю формат принимаемых данных, а еще лучше максимально упростить процесс. Проще всего это сделать с помощью слайдера или ползунка, перетаскивая который, пользователь будет иметь возможность изменить минимальную и максимальную цены.

Такой ползунок нам поможет реализовать библиотека jQuery UI. Скачаем и подключим эту библиотеку. Если вы не знаете, как это сделать, тогда предлагаю обратиться к статье jQuery UI календарь.

Собственно, нам необходимо подключить файл стилей и скриптов библиотеки jQuery UI:

<link rel="stylesheet" href="ui/jquery-ui.css">
<script src="ui/jquery-ui.js"></script>

1 2	<link rel="stylesheet" href="ui/jquery-ui.css"> <script src="ui/jquery-ui.js"></script>

Теперь нам потребуется элемент рядом с полем формы, в котором и будет находиться ползунок диапазона. Создадим обычный пустой div:

<input class="form-control" name="price" id="price">
<div id="slider-range"></div>

1 2	<input class="form-control" name="price" id="price"> <div id="slider-range"></div>

Теперь инициализируем виджет Slider. Для этого возьмем код его вызова из документации и используем его, заменив в нем элементы верстки своими при необходимости:

$(function(){

	$( "#slider-range" ).slider({
		range: true,
		min: 0,
		max: 1000,
		values: [ 75, 300 ],
		slide: function( event, ui ) {
			$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
		}
	});
	$( "#price" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
		" - $" + $( "#slider-range" ).slider( "values", 1 ) );

});

$(function(){

$( "#slider-range" ).slider({

range: true,

min: 0,

max: 1000,

values: [ 75, 300 ],

slide: function( event, ui ) {

$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

}

});

$( "#price" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +

" - $" + $( "#slider-range" ).slider( "values", 1 ) );

});

Проверим, как работает наш код.

Супер! Все работает. Теперь пользователь может тянуть ползунки слайдера и изменять диапазон значений цены. В API слайдера вы найдете всевозможные его настройки. Я, пожалуй, изменю лишь шаг диапазона. По умолчанию шаг равен единице. В интернет-магазинах цены могут быть круглыми значениями, поэтому я поставлю шаг 10 и изначальное минимальное значение — 0. Для этого я добавлю свойство step и немного изменю свойство values: