docs/components/slider
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
A slider for selecting a value from a range.
PreviewCode
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/slider
import { Slider } from "@/components/ui/slider";
<Slider />
Control the value with value and onValueChange for a controlled slider.
PreviewCode
Greater than 80
Temperature40
❌
Use <Field>, <SliderLabel>, and <SliderValue> for accessible labelling and to show the current value.
PreviewCode
Opacity50
Use an array with two values for a range slider.
PreviewCode
Use orientation="vertical" for a vertical slider.
PreviewCode
Use the disabled prop to disable the slider.
PreviewCode
Set min and max to constrain the slider's value range.
PreviewCode
Volume50
The showMarkers and markerInterval props display markers and control the interval between them.
PreviewCode
0123456789101112
Set step to control the slider's granularity.
Use with showMarkers and markerLabels to show custom labels on the markers.
PreviewCode
Storage size
5GB25GB50GB
Marks are only supported for horizontal sliders.
Root component. Manages value, track, range, and thumb(s).
| Prop | Type | Default |
|---|---|---|
value | number[] | - |
defaultValue | number[] | - |
onValueChange | (details: ValueChangeDetails) => void | - |
min | number | 0 |
max | number | 100 |
step | number | 1 |
orientation | `"horizontal" | "vertical"` |
disabled | boolean | false |
showMarkers | boolean | false |
markerInterval | number | 1 |
markerLabels | string[] | [] |
className | string | - |
Label for the slider. Required for accessibility.
| Prop | Type | Default |
|---|---|---|
className | string | - |
Shows the current value. Useful for numeric display or formatting.
| Prop | Type | Default |
|---|---|---|
className | string | - |
For a complete list of props, see the Ark UI documentation.
[
Previous page
Skip Nav ](/docs/components/skip-nav)[
Next page
Spinner ](/docs/components/spinner)
On This Page
InstallationUsageControlledExamplesWith label and valueRangeVerticalDisabledMin and maxMarksStepAPI ReferenceSliderSliderLabelSliderValue