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

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

В итоге получим это:

2. Настройки
  • animate

    Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.

    true или false, "fast" (быстро) или "slow" (медленно), или число в миллисекундах

    По умолчанию: — false

  • classes

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

    По умолчанию:

    Описание классов слайдера

    Подробнее об использовании классов на сайте learn.jquery.com

  • disabled

    Отключает true или включает false слайдер.

    По умолчанию: — false

  • max

    Максимальное значение ползунка.

    По умолчанию: — 100

  • min

    Минимальное значение ползунка.

    По умолчанию: — 0

  • orientation

    Горизонтальная "horizontal" или вертикальная "vertical" ориентация слайдера

    По умолчанию: — "horizontal"

  • range

    Определяет диапазон ползунка

    Значение true включит второй ползунок и диапазон между ними, "min" — диапазон от минимума шкалы до ползунка, "max" — диапазон от ползунка до максимума шкалы

    По умолчанию: — false

  • step

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

    По умолчанию: — 1

  • value

    Начальное значение ползунка, если он один

    По умолчанию: — 0

  • values

    Начальные значения ползунков, если их два, например [ 10, 20 ]

    По умолчанию: — null

3. Методы

Вызов этих функций позволяет быстро влиять на работу ползунка и получать с него данные

  • $( ".selector" ).slider( "destroy" );

    Полностью удаляет функциональность ползунка, что вернет элемент обратно в исходное состояние.

  • $( ".selector" ).slider( "disable" );

    Отключает ползунок.

  • $( ".selector" ).slider( "enable" );

    Возобновляет работу ползунка.

  • $( ".selector" ).slider( "option", { настройки } );

    Устанавливает одну или несколько настроек

  • var option = $( ".selector" ).slider("option", "min");

    Получает значение настройки

  • var option = $( ".selector" ).data().uiSlider.options;

    Получает значения всех настроек, например: option.min, option.max и т.д.

  • $( ".selector" ).slider( "value", 20 );

    Устанавливает нужное значение для рукоятки

  • var selection = $( ".selector" ).slider( "value" );

    Получает значение рукоятки

  • $( ".selector" ).slider( "values", [ 55, 105 ] );

    Устанавливает нужные значение для рукояток

  • $( ".selector" ).slider( "values", 0, 105 ] );

    Устанавливает нужное значение для рукоятки 0

  • var values = $( ".selector" ).slider( "values" );

    Получает значения рукояток

4. События
  • change ( event, ui )

    Событие, которое происходит при изменении значения ползунка

    или

  • create ( event, ui )

    Событие, которое запускается при создании ползунка

    или

  • slide ( event, ui )

    Событие, которое происходит на каждое движении мыши, при перетаскивании рукоятки ползунка. ui.value представляет текущее значение ползунка.

    или

  • start ( event, ui )

    Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка

    или

  • stop ( event, ui )

    Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка

    или

Подробнее о настройках, методах и событиях jQuery UI Slider на сайте api.jqueryui.com

5. Вывод значений ползунка

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

Значение ползунка:

Для слайдера из 2-х рукояток:

Значение ползунка:

6. Добавление значений к форме

Очень часто бывает, что данные такого слайдера нужно передать в форму, а не просто показывать на экране. Все делается аналогично выводу на экран, только данные подставляются в скрытое поле input

Значение ползунка:

7. Оформление

Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный

Другие способы оформления можно поглядеть в отдельной статье: Варианты оформления jQuery UI Slider

8. Описание классов

Ниже представлена таблица с классами слайдера и за что отвечает каждый из них

КлассОписание
.ui-sliderдорожка слайдера
.ui-slider-horizontalстили для горизонтального слайдера
.ui-slider-verticalстили для вертикального слайдера
.ui-slider-handleстили для рукоятки
.ui-slider-rangeстили для выбранного диапазона
.ui-slider-range-minстили для выбранного диапазона с настройкой range: "min"
.ui-slider-range-maxстили для выбранного диапазона с настройкой range: "max"
.ui-state-disabledстили для заблокированного слайдера (disabled: true)

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

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