Elastic Slider
Ползунок, который можно тянуть за края: дорожка растягивается с нарастающим сопротивлением и пружинит обратно.
зависимости 0файлы tsx + cssпараметры 7react 18+
X 0000 Y 0000↳ Потяните за любой край
Пульт07 параметров
01min
Минимальное значение.
02max
Максимальное значение.
03step
0 — без шага.
04maxOverflow
px
Насколько может растянуться дорожка.
05showValue
Показывать число.
06fillColor
Заполненная часть.
07trackColor
Пустая часть.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
min | number | 0 | Минимальное значение. |
max | number | 100 | Максимальное значение. |
step | number | 1 | 0 — без шага. |
maxOverflow | number | 50 | Насколько может растянуться дорожка. |
showValue | boolean | true | Показывать число. |
fillColor | string | "#b6e24c" | Заполненная часть. |
trackColor | string | "#2a2925" | Пустая часть. |
value | number | — | Контролируемое значение. |
defaultValue | number | 50 | Начальное значение без контроля. |
onChange | (value: number) => void | — | Вызывается с новым значением. |
leftIcon / rightIcon | ReactNode | — | Иконки по краям; растут, когда тянешь. |
label | string | 'Value' | Доступное имя для скринридеров. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |