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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Метки:

Похожие статьи:

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

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

Комментарии (1)

  1. Илья

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree