Components
Slider [react-aria-components]
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.
import { 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>
)
}
Dependencies
Tags
Source
Published
Similar components
Explore more
Part of Jolly UI — browse the full library on 21st.dev.