<Slider aria-label="Opacity" defaultValue={50}>
<SliderControl />
</Slider>npx shadcn@latest add @dotui/sliderUse slider to allow users to select a value from within a given range.
import { Slider, SliderControl } from "@/components/ui/slider";<Slider defaultValue={50}>
<SliderControl />
</Slider>Use the controls below to experiment with different slider props and see the live preview and code update.
The orientation of the Slider.
Orientation<Slider defaultValue={50}>
<Label>Volume</Label>
<SliderControl />
</Slider>A slider allows a user to select one or more values within a range.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
Orientation | 'horizontal' | ||
DOMRenderFunction<"div", SliderRenderProps> | — | ||
number | number[] | — | ||
number | number[] | — | ||
function | — | ||
function | — | ||
NumberFormatOptions | — | ||
A slider control is the interactive surface that positions the track and thumbs.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
DOMRenderFunction<"div", SliderTrackRenderProps> | — | ||
A slider track is the visual track that contains the selected fill.
Supports all div attributes.
A slider fill displays the selected region of the track.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
DOMRenderFunction<"div", SliderFillRenderProps> | — | ||
A slider thumb represents an individual value that the user can adjust within a slider track.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
number | 0 | ||
RefObject<HTMLInputElement | null> | — | ||
boolean | — | ||
Orientation | 'horizontal' | ||
DOMRenderFunction<"div", SliderThumbRenderProps> | — | ||
A slider output displays the current value of a slider as text.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
DOMRenderFunction<"output", SliderRenderProps> | — | ||
Last updated on 5/22/2026