Drag & physics
Elastic slider
Pull past either end and the track stretches like rubber, then wobbles back into shape.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ElasticSlider } from '@vizzele/react';
const [volume, setVolume] = useState(40);
<ElasticSlider
label="Volume"
value={volume}
onChange={setVolume}
startIcon={<SpeakerLow />}
endIcon={<SpeakerHigh />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible name (required). |
value / defaultValue | number | 50 | Controlled or uncontrolled value. |
min / max / step | number | 0 / 100 / 1 | Range. |
onChange | (v: number) => void | — | Value changes. |
formatValue | (v: number) => string | — | Display + aria-valuetext. |
startIcon / endIcon | ReactNode | — | Icons that get pushed by the stretch. |
showValue | boolean | true | Show the value. |
Accessibility
- role="slider" with aria-valuemin/max/now/text on the thumb.
- Arrows, PageUp/PageDown, Home/End. Bumping an end with the keyboard wobbles the track.