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 AlphaChannel() { return ( <ColorSlider channel="alpha" className="w-full max-w-xs" defaultValue="hsla(0, 100%, 50%, 0.5)"> <Label>Alpha</Label> <ColorSlider.Output /> <ColorSlider.Track> <ColorSlider.Thumb /> </ColorSlider.Track> </ColorSlider> ) }