A slider whose track bends toward the pointer like a rubber band while you drag and springs back on release. The thumb rides the curve with a value bubble above it. Arrow keys, Page keys, Home and End also work.
Screen brightness
Auto off
npx shadcn@latest add https://hyperblur.dev/r/slider-elastic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/slider-elastic.tsx.
import { SliderElastic } from "@/components/hyperblur/slider-elastic"
<SliderElastic value={volume} onChange={setVolume} label="Volume" formatValue={(v) => `${v}%`} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. Pair with onChange. | |
| defaultValue | number | 50 | Initial value when uncontrolled. |
| onChange | (value: number) => void | Called with the new snapped value whenever it changes. | |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Snap increment and arrow key step. |
| accent | string | "#2f7bff" | Fill, thumb ring and bubble color. |
| maxBend | number | 24 | Largest sideways bend of the track in pixels. |
| bubble | "auto" | "always" | "auto" | Show the value bubble only on hover, focus and drag, or all the time. |
| idle | boolean | true | Let the track wobble gently while nobody is touching it. |
| label | string | "Value" | Accessible name of the slider. |
| formatValue | (value: number) => string | Formats the bubble text and the announced value, for example adding a unit. | |
| disabled | boolean | false | Block pointer and keyboard changes. |