Slider with motion: a rubber-band stretch past the ends, a strain from the keyboard, and the value on odometer wheels in a bubble that leans as you drag.
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-slider.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-slider.jsonAdds components/dashral/motion/slider.tsx, the Slider it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:
$ pnpm dlx shadcn@latest add @dashral/motion-sliderUsage
The same as Slider, imported from components/dashral/motion/: swap the import and it moves.
import { Slider } from "@/components/dashral/motion/slider"
<Slider label="Volume" value={volume} onValueChange={setVolume} max={100} />Examples
Volume
Drag past either end and the track stretches after you; the bubble writes the level on wheels and leans as you go, and Mute slides it down and back.
Price filter
Two thumbs, each bubble writing its price; the bars inside the range rise, the rest sink back, and the count of results rolls.
Compared with Default
The thumb grows a little while held; the value shows only if you put it beside the label.
Motion
Dragged past an end, the track stretches like a rubber band and snaps back; a key past an end strains the thumb; a bubble shows the value on odometer wheels, leaning the way you drag; phones buzz at the ends.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Slider, and every attribute of the element it renders. What the Motion edition adds is marked Motion.
Slider
Also takes every prop of Radix Slider(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
valueLabel | "active" | "always" | false
| "active" |
formatOptions | Intl.NumberFormatOptions
| — |
value / defaultValue | number[]One value, or two for a range. | — |
onValueChange | (value: number[]) => voidCalled with the new value. | — |
min / max / step | number | 0 / 100 / 1 |
color | "primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"The filled part and the thumbs. | "primary" |
thumbLabels | string[]Each thumb's name, for a range: ["Minimum price", "Maximum price"]. | — |
label | ReactNodeShown above, linked to the control. | — |
description | ReactNodeA hint under the control. | — |
error | boolean | ReactNodetrue shows the error style; a message also shows under the control. | — |
labelAction | ReactNodeAt the end of the label's row, e.g. a “Forgot password?” link or the current value. | — |
withAsterisk | booleanMarks the label with an asterisk, e.g. alongside required. | false |
classNames | { root, label, description, error, track, range, thumb }Classes for each part. | — |
Motion
- Held, the thumb grows to 125% on a spring.
- Dragged past an end, the track stretches toward your finger from the end that stays put, and the thumb comes along, giving less the farther you pull (14px at most); let go and both snap back with a little bounce.
- An arrow, Page or Home/End key past an end makes the thumb strain that way and spring home.
- The value bubble pops in over the thumb and writes the value on odometer wheels; it leans the way you drag, more the faster you go, and settles upright when you stop.
- On a phone it buzzes at each end, and on every step of a coarse slider (24 steps or fewer). With reduced motion nothing stretches, leans or strains, and the bubble only fades.