Pick a value or a range by dragging a thumb.
$ pnpm dlx shadcn@latest add https://dashral.com/r/slider.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/slider.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/sliderUsage
example.tsx
import { Slider } from "@/components/dashral/slider"
<Slider label="Price" defaultValue={[20, 80]} thumbLabels={["Minimum price", "Maximum price"]} />Examples
API reference
Slider
Also takes every prop of Radix Slider(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
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. | — |
Keyboard
| Keys | Action |
|---|---|
| Arrow keys | One step |
| Page UporPage Down | Bigger steps |
| HomeorEnd | Min / max |
Accessibility
- Each thumb is role="slider" with its value, named by the label (or aria-label); a range names each thumb with thumbLabels.
Motion
- The thumb grows a little while you drag it.