Slider

Общая информация

Слайдер (slider) — элемент использующийся для выбора значения, либо диапазона значений на шкале.

Анатомия

1. Input. Поля ввода минимального и максимального значения

2. Минимальное значение

3. Knob (thumb). Ползунок. Элемент управления

4. Change value. Уровень заполненности

5. Track. Шкала

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

Описание работы

C помощью ползунка (knob) пользователь в зависимости от задачи может изменять значение, либо выбирать диапазон. Есть два способа изменения значений:

1. Ввод значения в инпут

2. Перемещение ползунка

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

Виды

Значение

Используются для выбора определённого значения.

Диапазон

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

Состояния

Активным элементом является ползунок (knob). При работе со слайдером изменяется именно он во всех случаях, кроме состояния Disabled.

Default

По умолчанию (состояние покоя). Когда пользователь не взаимодействует со слайдером

Hover

При наведении курсора

Active

В момент клика мышкой на ползунок

Disabled

Неактивное (недоступное для изменения). Также в этом состоянии становится неактивным не только ползунок, но и уровень заполненности

Focus

Все вышеперечисленные состояния ползунка (knob), кроме disabled, могут сочитаться с фокусом.

Размеры

Диаметр ползунка 16рх. Толщина обводка 2 пикселя.

Элемент	Значение

Цвета

Цвета инпутов можно посмотреть в их описании