On this page
Props
channel
orientation
<ColorSlider defaultValue="hsl(0, 100%, 50%)">
<Label>Hue</Label>
<ColorSliderControl />
</ColorSlider>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/color-sliderUsage
Use 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>Examples
Value: #FF0000
API Reference
ColorSlider
A color slider allows users to adjust an individual channel of a color value.
| Prop | Type | Default | |
|---|---|---|---|
ColorChannel | — | ||
ReactNode | function | — | ||
ColorSpace | — | ||
boolean | — | ||
Orientation | 'horizontal' | ||
Color | string | — | ||
Color | string | — | ||
function | — | ||
function | — | ||
ColorSliderControl
A color slider control is the interactive track along which the thumb can be dragged.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
ColorSliderOutput
A slider output displays the current value of a slider as text.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Last updated on 6/16/2026