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 Basic() { return ( <ColorSlider channel="hue" className="w-full max-w-xs" defaultValue="hsl(0, 100%, 50%)"> <Label>Hue</Label> <ColorSlider.Output /> <ColorSlider.Track> <ColorSlider.Thumb /> </ColorSlider.Track> </ColorSlider> ) }