UI контролы Slider и RangeSlider

Slider и RangeSlider - это JavaScript контролы для выбора чисел из заданного диапазона.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Главное отличие между этими контролами в том, что Slider позволяет выбирать одно число, а RangeSlider - числовой диапазон. Пользователи могут устанавливать нужное число, перетаскивая бегунки налево или направо. Ярлыки и заголовки отображают название изменяемого свойства и его текущую величину.

Slider

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

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

Вы можете задавать свои минимальные и максимальные значения для слайдера вместо значений по умолчанию.

Двигающиеся заголовки

Заголовок контрола Slider показывает текущее выбранное значение. С помощью обработчиков событий, вы можете добавлять действия, которые должны произойти при изменении величины. По умолчанию заголовки передвигаются вместе с бегунком, но вы можете также зафиксировать их.

Подвигайте бегунок слайдера

Вертикальный Slider

Контрол Slider может быть вертикальным или горизонтальным в зависимости от соответствующей настройки.

RangeSlider

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