Slider
Общая информация
Слайдер (slider) — элемент использующийся для выбора значения, либо диапазона значений на шкале.
Анатомия
Input. Поля ввода минимального и максимального значения
Минимальное значение
Knob (thumb). Ползунок. Элемент управления
Change value. Уровень заполненности
Track. Шкала
Максимальное значение
Описание работы
C помощью ползунка (knob) пользователь в зависимости от задачи может изменять значение, либо выбирать диапазон. Есть два способа изменения значений:
Ввод значения в инпут
Перемещение ползунка
Ввод значений в инпут удобнее, если шкала содержит большой разброс данных и выбрать точное значение затруднительно. В противном случае удобнее использовать ползунок.
Виды
Значение
Используются для выбора определённого значения.
Диапазон
Используются для выбора диапазона значений от минимального к максимальному.
Состояния
Активным элементом является ползунок (knob). При работе со слайдером изменяется именно он во всех случаях, кроме состояния Disabled.
Default
По умолчанию (состояние покоя). Когда пользователь не взаимодействует со слайдером
Hover
При наведении курсора
Active
В момент клика мышкой на ползунок
Disabled
Неактивное (недоступное для изменения). Также в этом состоянии становится неактивным не только ползунок, но и уровень заполненности
Focus
Все вышеперечисленные состояния ползунка (knob), кроме disabled, могут сочитаться с фокусом.
Размеры
Диаметр ползунка 16рх. Толщина обводка 2 пикселя.
| Элемент | Значение |
|---|---|
Цвета
Цвета инпутов можно посмотреть в их описании
Last updated
