Slider
An input where the user selects a value from within a given range.
Newforminteractive
Loading preview...
Installation
npx baseui-cn add sliderUsage
import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={1} />
Examples
Basic
A simple slider.
Loading preview...
Range
A range slider with two thumbs.
Loading preview...
With steps
Slider with discrete steps.
Loading preview...
Vertical
A vertical slider.
Loading preview...
Disabled
A disabled slider.
Loading preview...
API Reference
See the Base UI Slider documentation for the full API reference, including all props, data attributes, and CSS classes.