Slider
An input where the user selects a value from within a given range.
Loading example…
Installation
bunx --bun shadcn@latest add @sui/sliderInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import { Slider } from "@workspace/ui/components/slider"<Slider defaultValue={[33]} max={100} step={1} />Range
Use an array with two values for a range slider.
Loading example…
Multiple Thumbs
Use an array with multiple values for multiple thumbs.
Loading example…
Vertical
Use orientation="vertical" for a vertical slider.
Loading example…
Controlled
Loading example…
Disabled
Use the disabled prop to disable the slider.
Loading example…
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Loading example…
API Reference
See the Base UI Slider documentation.