Components
Loading preview...
A slider allows a user to select one or more values within a range. The <input type="range"> HTML element can be used to build a slider, however it is very difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/sliderimport { Label } from "@/components/ui/field"
import {
Slider,
SliderFillTrack,
SliderOutput,
SliderThumb,
SliderTrack,
} from "@/components/ui/slider"
export function SliderDemo() {
return (
<Slider defaultValue={30} className="flex w-1/5 flex-col items-start gap-2">
<div className="flex w-full justify-between">
<Label>Opacity</Label>
<SliderOutput />
</div>
<SliderTrack>
<SliderFillTrack />
<SliderThumb />
</SliderTrack>
</Slider>
)
}