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

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

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

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

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

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

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

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

<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>

Теперь инициализируем виджет 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 ) );

});

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

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

values: [ 0, 300 ],
step: 10,

Отлично, все работает! На этом у меня все. Удачи!

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree