HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.
import { ColorSlider } from "@/components/ui/heroui-color-slider" import { Label } from "@heroui/react" export default function Disabled() { return ( <ColorSlider isDisabled channel="hue" className="w-full max-w-xs" defaultValue="hsl(200, 100%, 50%)" > <Label>Hue</Label> <ColorSlider.Output /> <ColorSlider.Track> <ColorSlider.Thumb /> </ColorSlider.Track> </ColorSlider> ) }