<ColorSlider aria-label="Hue" channel="hue" defaultValue="hsl(200, 100%, 50%)">
<ColorSliderControl />
</ColorSlider>npx 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.
Orientation<ColorSlider
defaultValue="hsl(0, 100%, 50%)"
channel="hue"
orientation="horizontal"
>
<Label>hue</Label>
<ColorSliderControl />
</ColorSlider>Value: #FF0000
A color slider allows users to adjust an individual channel of a color value.
| Prop | Type | Default | |
|---|---|---|---|
ColorChannel | — | ||
ReactNode | function | — | ||
ColorSpace | — | ||
boolean | — | ||
Orientation | 'horizontal' | ||
DOMRenderFunction<"div", ColorSliderRenderProps> | — | ||
Color | string | — | ||
Color | string | — | ||
function | — | ||
function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
DOMRenderFunction<"div", SliderTrackRenderProps> | — | ||
Last updated on 5/22/2026