Slider
A control for selecting a value from a continuous or stepped range.
Installation
npx shadcn@latest add @tetra-ui/sliderUsage
import { Slider } from "@/components/ui/slider";<Slider value={0.5} onValueChange={() => {}} />Controlled
Pass value and onValueChange for controlled state:
const [value, setValue] = useState(0.5);
<Slider value={value} onValueChange={setValue} />Range
Use min, max, and step to configure the value range. By default, the slider ranges from 0 to 1:
<Slider
value={value}
onValueChange={setValue}
min={0}
max={100}
step={10}
/>Disabled
<Slider disabled value={0.5} onValueChange={() => {}} />