Components
Loading preview...
Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full keyboard and screen-reader support. Built on React Aria.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-slider"use client"
import { Slider, Label } from "@/components/ui/heroui-slider"
const sliderAccent = {
"--accent": "#0485f7",
"--accent-hover": "#0473d4",
"--accent-foreground": "#ffffff",
}
export default function Range() {
return (
<Slider
className="w-full max-w-xs"
defaultValue={[100, 500]}
formatOptions={{ style: "currency", currency: "USD" }}
maxValue={1000}
minValue={0}
step={50}
style={sliderAccent}
>
<Label>Price Range</Label>
<Slider.Output />
<Slider.Track>
{({ state }) => (
<>
<Slider.Fill />
{state.values.map((_, i) => (
<Slider.Thumb key={i} index={i} />
))}
</>
)}
</Slider.Track>
</Slider>
)
}