Slider

Slider — составной компонент для выбора одного или нескольких чисел из ограниченного диапазона.

Подписи

Дайте каждому SliderThumbInput доступное имя через aria-label или aria-labelledby; в слайдере диапазона называйте концы («Минимальная цена», «Максимальная цена»).
Показывайте значение рядом, если его смысл не очевиден из подписи.

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.

Клавиша	Действие
`→↑`	Увеличивает значение бегунка в фокусе на один `step`. В горизонтальном слайдере в RTL Chromium и Firefox увеличивают значение по ←; Safari стрелки не отражает.
`←↓`	Уменьшает значение бегунка в фокусе на один `step`. В горизонтальном слайдере в RTL Chromium и Firefox уменьшают значение по →; Safari стрелки не отражает.
`Page UpPage Down`	Увеличивает или уменьшает значение на десятую часть диапазона или на один `step`, если он больше.
`HomeEnd`	Переносит бегунок к его минимуму или максимуму. В диапазоне бегунок останавливается у соседнего с учётом `minStepsBetweenThumbs`.
`TabShift + Tab`	Переносит фокус между бегунками. Каждый бегунок — отдельная остановка табуляции.

Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.

Фокус попадает на нативное поле бегунка; SliderThumbIndicator показывает focus-visible с --focus-color.

Каждый бегунок — нативный слайдер с aria-valuenow, aria-valuemin, aria-valuemax из поля ввода; при нескольких бегунках минимум и максимум — это соседи, поэтому скринридеры объявляют, насколько далеко может сдвинуться бегунок.
aria-orientation следует orientation корня.
SliderThumbIndicator помечен aria-hidden; его содержимое — только декорация. Доступный текст задавайте на SliderThumbInput через aria-valuetext.
Используйте aria-valuetext на бегунке, когда одно число не несёт смысла ("20 °C").

Каждый бегунок отправляется под своим name или name корня; несколько бегунков с одинаковым именем читаются через FormData.getAll.
Сброс формы восстанавливает значения по умолчанию; отменённый сброс оставляет их как есть.
<fieldset disabled> отключает бегунки и клики по дорожке.