Elastic Slider
An accessible slider that stretches elastically when dragged past its ends.
pointera11yspring
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Range
Value50
Min0
Max100
Step1
Style
Tick marks0
Show icons
Fill color
Motion
Elastic overflow60px
Stiffness300
Damping30
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | 50 | Initial value (uncontrolled). |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Increment per key press / drag snap. |
markers | number | 0 | Number of evenly spaced tick marks; 0 renders none. |
showIcons | boolean | true | Flank the track with min/max volume icons. |
accent | string | "#8b5cf6" | Fill color (hex). |
overflow | number | 60 | Max pixels the track elastically stretches past an end. |
stiffness | number | 300 | Spring stiffness for the elastic stretch. |
damping | number | 30 | Spring damping for the elastic stretch. |
onValueChange | (value: number) => void | — | Called with the new value whenever it changes. |
label | string | "Elastic slider" | Accessible name for the slider. |