Components
Loading preview...
A color slider allows users to adjust an individual channel of a color value.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-color-sliderimport { ColorSlider, Label } from "@/components/ui/heroui-color-slider";
// Source fixture: 200°
export default function Disabled() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<ColorSlider
channel="hue"
className="w-full max-w-xs"
defaultValue="hsl(200, 100%, 50%)"
isDisabled
>
<Label>Hue</Label>
<ColorSlider.Output />
<ColorSlider.Track>
<ColorSlider.Thumb />
</ColorSlider.Track>
</ColorSlider>
</div>
);
}
export { Disabled };