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-sliderimport { Slider, Label } from "@/components/ui/heroui-slider"
const sliderAccent = {
"--accent": "#0485f7",
"--accent-hover": "#0473d4",
"--accent-foreground": "#ffffff",
}
export default function Disabled() {
return (
<Slider isDisabled className="w-full max-w-xs" defaultValue={30} style={sliderAccent}>
<Label>Volume</Label>
<Slider.Output />
<Slider.Track>
<Slider.Fill />
<Slider.Thumb />
</Slider.Track>
</Slider>
)
}