Components
HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.
npx @21st-dev/cli@beta add hero_ui/heroui-color-sliderLoading preview...
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>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...