Slider
Slider — ползунок на Ark Slider: одно число в границах min–max. Тянется мышью и пальцем, клик по треку переносит ползунок в точку клика, с клавиатуры значение меняют стрелки, Home и End.
Значение ведётся контролируемо (пара value / onValueChange) или неконтролируемо (defaultValue). onValueChange отдаёт уже число и зовётся на каждый шаг, onValueChangeEnd — один раз, когда ползунок отпустили. Видимой подписи и вывода значения у ползунка нет: их рисует потребитель, а для скринридера подпись задаёт aria-label. С name значение уходит при нативной отправке формы.
Используется в: ImageCropper
Анатомия
Примеры
Границы и шаг
min и max задают границы, step — шаг: к нему привязаны и перетаскивание, и стрелки. Дробный шаг даёт дробные значения.
Отключённыйdisabled
disabled отключает ползунок: он не тянется и не получает фокус.
API
| Prop | Type | Default |
|---|---|---|
valueЗначение — контролируемый режим. Пара с onValueChange | number | - |
defaultValueНачальное значение для неконтролируемого режима | number | - |
onValueChangeЗначение изменилось: вызывается на каждый шаг, пока ползунок тянут, и на нажатие стрелок | (value: number) => void | - |
onValueChangeEndИзменение закончено: ползунок отпустили. Для действий, которые незачем повторять на каждый шаг, — например, запроса на сервер | (value: number) => void | - |
minНижняя граница | number | 0 |
maxВерхняя граница | number | 100 |
stepШаг значения: к нему привязывается и перетаскивание, и стрелки | number | 1 |
disabledОтключает ползунок | boolean | - |
nameИмя скрытого инпута — под ним значение уходит при нативной отправке формы | string | - |
aria-labelПодпись для скринридера: видимого лейбла у ползунка нет | string | - |
className | string | - |
style | CSSProperties | - |