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-slider"use client";
import { useState } from "react";
import { ColorSlider, ColorSwatch, Label, makeColor, parseColor } from "@/components/ui/heroui-color-slider";
// Source fixture: Current color: rgb(255, 100, 50)
export default function RgbChannels() {
const [color, setColor] = useState(() => makeColor(parseColor("rgb(255, 100, 50)")));
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex w-full max-w-xs flex-col gap-4">
<ColorSlider channel="red" colorSpace="rgb" value={color} onChange={setColor}>
<Label>Red</Label>
<ColorSlider.Output />
<ColorSlider.Track>
<ColorSlider.Thumb />
</ColorSlider.Track>
</ColorSlider>
<ColorSlider channel="green" colorSpace="rgb" value={color} onChange={setColor}>
<Label>Green</Label>
<ColorSlider.Output />
<ColorSlider.Track>
<ColorSlider.Thumb />
</ColorSlider.Track>
</ColorSlider>
<ColorSlider channel="blue" colorSpace="rgb" value={color} onChange={setColor}>
<Label>Blue</Label>
<ColorSlider.Output />
<ColorSlider.Track>
<ColorSlider.Thumb />
</ColorSlider.Track>
</ColorSlider>
<div className="flex items-center gap-2">
<ColorSwatch color={color} size="sm" />
<p className="text-sm text-muted">
Current color: <code className="font-mono">{color.toString("rgb")}</code>
</p>
</div>
</div>
</div>
);
}
export { RgbChannels };