Слайдер
Слайдер задаёт примерное число или диапазон: нужно перетащить ручку по шкале.
<tk-slider label="Volume" value="60" show-value></tk-slider>
Анатомия
| Часть | Что это |
|---|---|
tk-slider |
сам элемент; по одной остановке Tab на ручку |
| дорожка | вся шкала |
| заполненная часть | от начала до ручки или между двумя ручками в диапазоне |
| ручка | круглый захват, который тянут; для скринридера это и есть слайдер |
| пузырь со значением | необязательная подпись над ручкой, пока её тянут или она в фокусе (show-value) |
| подписи min и max | необязательные подписи по краям (show-min-max) |
| деления | необязательные отметки на каждом step (marks) |
Нажатие на дорожку переносит туда ближайшую ручку. Видимой подписи у слайдера нет:
поставьте её над ним и задайте в label те же слова.
Диапазон
<tk-slider range label="Price" min="0" max="500" step="10" value-start="100" value-end="300" show-value></tk-slider>
rangeдобавляет вторую ручку. Границы читайте изvalue-startиvalue-end.- Ручки не могут перейти друг через друга.
min-gapдержит между ними не меньше заданного числа единиц. - Каждая ручка — отдельная остановка Tab. Скринридер называет их «Price (minimum)» и «Price (maximum)».
- Для важных диапазонов добавьте ещё два числовых поля. Слайдеры с двумя ручками работают со скринридерами по-разному.
Шкала и значение
<tk-slider label="Brightness" value="40" value-format="percent" show-min-max></tk-slider> <tk-slider label="Rating" min="1" max="5" value="3" marks show-value></tk-slider>
min,maxиstepзадают шкалу. Значения не выходят за неё и привязываются кstep, даже если делений не видно.value-format="percent"показывает значение в процентах: в пузыре, в подписях по краям и для скринридера.marksставит деление на каждомstep. Подходит для нескольких шагов, а не для длинной шкалы.- Для валюты или единиц измерения задайте функцию в свойство
format; она важнее, чемvalue-format:
<tk-slider id="budget" label="Budget" max="1000" step="50" show-value></tk-slider>
<script>
document.querySelector('#budget').format = (v) => `$${v}`;
</script>Размеры
<tk-slider label="Medium slider" value="50"></tk-slider> <tk-slider label="Small slider" size="small" value="50"></tk-slider>
size |
Дорожка | Ручка | Высота |
|---|---|---|---|
medium (по умолчанию) |
10px | 18px | 24px |
small |
4px | 12px | 24px |
Оба размера высотой 24px, и у каждой ручки цель нажатия 24px, поэтому слайдер помещается в плотную строку без дополнительных отступов.
Состояния
<tk-slider label="Bass" value="30" disabled></tk-slider>
Пока ручку тянут, она увеличивается. При фокусе с клавиатуры вокруг ручки появляется рамка.
disabled: слайдер приглушён, на него нельзя перейти, его нельзя изменить, он не отправляется с формой.
Когда использовать
- Слайдер — для примерного значения с мгновенным откликом, например громкости или яркости.
range— для нижней и верхней границы, например диапазона цен.- Для точного числа, очень большого или очень маленького диапазона, или если число нужно
вводить с клавиатуры, берите
Number input . Если нужно и то и другое, поставьте его рядом со слайдером. - Чтобы показать ход процесса, нужен
Progress bar . Слайдер — для ввода. - Не используйте слайдер для дат и других нечисловых значений.
Текст
- Подпись — то, что задаёт слайдер, например «Громкость», а не инструкция вроде «Перетащите, чтобы изменить громкость».
- Минимум с начальной стороны, максимум с конечной. В интерфейсах справа налево отражайте зеркально.
- Пишите значения так, как их читают люди: проценты, валюта, единицы измерения.
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Слайдер для примерного значения с мгновенным откликом | Собирать им точное число; для этого числовое поле |
| Подпись — что он задаёт: «Громкость» | Подпись-инструкция: «Перетащите, чтобы изменить» |
| Числовые поля рядом для точных или важных значений | Только слайдер с двумя ручками для пользователей скринридеров |
| Progress bar, чтобы показать ход процесса | Слайдер, чтобы показать ход процесса |
| Слайдер для чисел | Слайдер для дат и других нечисловых значений |
Связанные
Number input : точное число, ввод с клавиатуры.Progress bar : показывает ход процесса; похож, но только для чтения.Input : другие текстовые и числовые поля.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
label |
string | доступное имя, обязательно; у ручек диапазона добавляется «(minimum)» и «(maximum)» | |
value |
number | 0 |
значение, одна ручка |
range |
boolean | false |
две ручки вместо одной |
value-start |
number | 0 |
нижняя ручка диапазона |
value-end |
number | 100 |
верхняя ручка диапазона |
min |
number | 0 |
начало шкалы |
max |
number | 100 |
конец шкалы |
step |
number | 1 |
шаг для клавиш и перетаскивания |
min-gap |
number | 0 |
диапазон: наименьшее расстояние между ручками |
size |
medium | small |
medium |
размер дорожки и ручки |
show-value |
boolean | false |
пузырь со значением, пока ручку тянут или она в фокусе |
value-format |
number | percent |
number |
как записываются значения |
show-min-max |
boolean | false |
подписи на обоих краях |
marks |
boolean | false |
деления на каждом step |
disabled |
boolean | false |
не в фокусе, не меняется, не попадает в форму |
name |
string | имя поля формы |
Свойства
| Свойство | Тип | Что делает |
|---|---|---|
format |
(value: number) => string |
записывает значение для пузыря, подписей по краям и скринридера; важнее, чем value-format |
События
input и change срабатывают вместе каждый раз, когда пользователь сдвигает ручку на шаг,
перетаскиванием или клавишами, но не когда значение меняет ваш код. Читайте value или
value-start и value-end. form.reset() возвращает начальные значения без событий.
Значение в форме
Одиночный слайдер отправляет value под именем name. Диапазон отправляет два поля:
{name}-start и {name}-end.
Методы
focus() переводит фокус на ручку, а в диапазоне на нижнюю.
Токены
| Часть | Токен |
|---|---|
| дорожка | surface/sunken |
| заполненная часть | fill/accent; отключённый fill/disabled |
| ручка | surface/default + рамка border/selected |
| рамка фокуса | border/accent/focus |
| пузырь со значением | surface/inverse + text/inverse, radius-8 |
| подписи min и max, деления | text/secondary |
Дорожка, заполненная часть и ручка скруглены radius-full. Подписи по краям — Body Small.
Значения по темам:
Доступность
Встроено:
- Каждая ручка —
role="slider"со значением, минимумом, максимумом и читаемым текстом значения. - В диапазоне пределы каждой ручки зависят от другой, и у каждой своё имя.
- Полная клавиатура слайдера, см. ниже. Фокус виден только при работе с клавиатуры и никогда не прячется.
- У каждой ручки цель нажатия 24 × 24px в обоих размерах.
- Края дорожки, заполненной части и ручки не ниже 3:1 в любой теме.
- При уменьшенной анимации ручка всё так же двигается, но без анимации увеличения.
На вашей стороне:
- Задайте
labelи покажите те же слова видимой подписью. - Для точных значений или важных диапазонов добавьте ещё и числовые поля.
| Клавиша | Действие |
|---|---|
Tab |
переводит фокус на следующую ручку |
→ / ↑ |
прибавляет один step |
← / ↓ |
убавляет один step |
Shift + стрелка, Page Up / Page Down |
большой шаг: десятая часть шкалы, не меньше одного step |
Home / End |
переходит к наименьшему или наибольшему значению |