← All components
Interaction / component
Elastic Slider
A tactile value control with an elastic track that stretches at its limits.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Demo.tsx contains the complete interactive example.
- Reduced motion renders a static state. Paused, hidden and offscreen instances stop requesting animation frames.
- Arrow keys change by stepSize; Page keys change by ten steps; Home and End select bounds. Stepping is relative to the minimum. An inverted range collapses to the minimum. Default icons are dependency-free minus and plus symbols.
React 19Pointer Events
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | 50 | Starting value |
startingValue | number | 0 | Minimum |
maxValue | number | 100 | Maximum |
isStepped | boolean | false | Snap to steps |
stepSize | number | 1 | Step size |
value | number | undefined | Controlled value; omit for internal state. |
onChange | (value: number) => void | undefined | Receives bounded values after pointer or keyboard changes. |
label | string | "Volume" | Accessible slider label. |
leftIcon | ReactNode | minus symbol | Leading decorative icon. |
rightIcon | ReactNode | plus symbol | Trailing decorative icon. |
paused | boolean | false | Freeze decorative motion; controls remain usable. |
replayToken | number | 0 | Change to reset decorative motion. |
className | string | '' | Additional outer classes. |