ColorSlider

A component for selecting a color using a slider. Provides interactive color selection with proper accessibility semantics.

Preview

Code

Examples

Disabled

Preview

Code

HSLA

Preview

Code

RGBA

Preview

Code

Props

Name	Type	Default
`isDisabled`	`boolean`	—
`id`	`string`	—
`name`	`string`	—
`value`	`string` \| `Color`	—
`defaultValue`	`string` \| `Color`	—
`onChange`	`((value: Color) => void)`	—
`channel`	`ColorChannel`	—
`colorSpace`	`ColorSpace`	—
`onChangeEnd`	`((value: Color) => void)`	—
`orientation`	`Orientation`	`'horizontal'`
`children`	`ReactNode` \| `((values: ColorSliderRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	—
`className`	`string` \| `((values: ColorSliderRenderProps & { defaultClassName: string; }) => string)`	—
`style`	`CSSProperties` \| `((values: ColorSliderRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	—
`slot`	`string` \| `null`	—