Все варианты в данной заметке являются адаптивными, и слайдер не зависит от ширины блока, в котором он находятся.

Установка плагина
  • подключаем библиотеку jQuery версии 1.7+
  • подключаем библиотеку jQuery UI с виджетом Slider
  • подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах

Более подробно об этом плагине можно узнать в статье: Ползунок диапазонов jQuery UI Slider

Вариант 1

Данный пример не привязан к начальному и конечному значению слайдера, но подходит только для небольшого диапазона

Вариант 2

Данный пример подходит к большим значениям вводимых данных

Вариант 3

Для того чтобы рукоятка не выползала за рамки дорожки, можно добавить дополнительную. Дорожка ползунка в данном случае беcцветная, а рукоятка двигается по альтернативной дорожке, которая подкладывается под сладйер

Т.к. дорожка в данном примере получилась широкая, добавим на нее название слайдера или другой текст, который будет менять свое положение в зависимости от положения рукоятки

Вариант 3
Вариант 4

В данном примере со стрелками используется шрифт FontAwesome. Если он не подключен на сайте, нужно в JS заменить стрелки <i class=’fa fa-chevron-left’></i> и <i class=’fa fa-chevron-right’></i> на другие.

Вариант 5

Последний пример с двумя рукояткамии и полями для ввода данных.

Слайдер сделан таким образом, чтобы нельзя было ввести невозможные значения данных, а именно:

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

Обработка введенных данных и расстановка рукояток происходит по клику на любом месте страницы.

Я не стал описывать как работают те или иные строчки в коде. Поэтому если у вас возникнут какие-нибудь вопросы, или вы найдете ошибки — напишите об этом в комментариях.

Автор: Александр Суханов [ atuin.ru ]

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

Ваш комментарий отправлен!