Slider
Sets one continuous value by dragging along a track.
Volume64%
Rotation12°
Price range190 USD → 800 USD
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
5 examplesLive
Volume64%
Rotation12°
Price range190 USD → 800 USD
Default
md
lg
Labelled
Volume64%
Volume64%
At minimum
md
lg
Two thumbs
Price range190 USD → 800 USD
Price range190 USD → 800 USD
States
3 examplesHover
64
64
Focus visible
64
64
Disabled
64
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Controlled value. |
| defaultValue | number | - | Uncontrolled initial value. |
| min | number | 0 | Minimum value of the range. |
| max | number | 100 | Maximum value of the range. |
| step | number | 1 | Increment the value snaps to. |
| onValueChange | (next: number) => void | - | Handler called with the new value on drag or keyboard change. |
| label | string | - | Optional uppercase sans label. |
| size | 'md'|'lg' | 'md' | Rung on the shared control ladder, which starts at md here — an sm slider is too small a drag target. Scales the track row, thumb and readout together. |
| showValue | boolean | true | Render the numeric readout next to the label. |
| showScale | boolean | true | Print `min` and `max` under the track ends, the domain the fill is a proportion of. Turn it off for a slider whose range is already obvious from its surroundings. |
| unit | string | - | Optional unit suffix (e.g. "%", "KM"). |
| disabled | boolean | false | Disables interaction and dims the slider. |
| className | string | - | Additional classes for the root wrapper. |
| style | React.CSSProperties | - | Inline styles merged onto the root wrapper. |
| id | string | - | Id for the slider track; auto-generated when omitted. |
AI Canvas