Slider
Range value slider with track and thumb
Preview
50
Usage
import { Slider } from "@/components/ui/slider"
import { useState } from "react"
function SliderDemo() {
const [value, setValue] = useState([50])
return (
<Slider
value={value}
onValueChange={setValue}
min={0}
max={100}
step={1}
className="w-[300px]"
/>
)
}The value and onValueChange use arrays to support future range slider scenarios. For a single value, use [50].
Install
npx shadcn add @bonsai/slider