Клавиша / esc

slider

Роль ползунка для выбора чисел из заданного диапазона.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Самостоятельная роль виджета из WAI-ARIA для ползунка для выбора чисел из заданного диапазона.

В HTML эта роль есть у <input type="range"> по умолчанию.

Как пишется

Скопировано

Задайте role="slider" любому тегу, но лучше всего <div> или <span>. В большинстве случаев лучше используйте <input> с type="range".

Если решили делать кастомный элемент, не забудьте добавить его в порядок фокуса с помощью tabindex, когда задаёте роль slider статическому элементу, с которым нельзя взаимодействовать. Также обязательно укажите текущее значение в aria-valuenow и дополнительно aria-valuemin для минимального значения и aria-valuemax для максимального.

У slider по умолчанию есть aria-orientation со значением horizontal.

Ещё элементам с ролью slider можно задавать все глобальные ARIA-атрибуты.