<ColorSlider
aria-label="Hue"
channel="hue"
defaultValue="hsl(200, 100%, 50%)"
>
<ColorSliderControl />
</ColorSlider>pnpm dlx shadcn@latest add @dotui/color-sliderUse color sliders to allow users to adjust an individual channel of a color value.
import { ColorSlider, ColorSliderControl } from "@/components/ui/color-slider";
import { Label } from "@/components/ui/field";<ColorSlider defaultValue="#ff0000" channel="hue">
<Label>Hue</Label>
<ColorSliderControl />
</ColorSlider>Use the controls below to experiment with different color slider props and see the live preview and code update.
The color channel that the slider manipulates.
ColorChannelThe orientation of the Slider.
OrientationA color slider allows users to adjust an individual channel of a color value.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(ColorSlider)
defaultValue="hsl(0, 100%, 50%)"
channel="hue"
orientation="horizontal"
>
<Dynamic(Label)>hue</Dynamic(Label)>
<Dynamic(ColorSliderControl) />
</Dynamic(ColorSlider)>