Slider
A control for picking a value, or a range, from an interval.
Installation
npx shadcn@latest add @blank/sliderUsage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[50]} max={100} step={1} />Examples
Range
Pass two values and the slider draws two thumbs.
With a value
4
Vertical
showFill={false} drops the filled track for values that are a position, not an amount.
API Reference
Slider
Every Radix Slider.Root prop, such as value, onValueChange, onValueCommit, step and orientation, plus:
| Prop | Type | Default |
|---|---|---|
min | number | 0 |
max | number | 100 |
showFill | boolean | true |