Color Slider

Adjusts an individual channel of a color value.

Import

ts
import { ColorSlider } from "@kobalte/core/color-slider";
// or
import { Root, Track, ... } from "@kobalte/core/color-slider";

ts
import { ColorSlider } from "@kobalte/core/color-slider";
// or
import { Root, Track, ... } from "@kobalte/core/color-slider";

Features

Can be controlled or uncontrolled.
Localized color descriptions for screen reader users.
Support for adjusting a single channel of RGBA, HSLA and HSBA colors, in both horizontal and vertical orientations.
Support click or touch on track to change value.
Support right or left direction.
Support for custom value label.

Anatomy

The color slider consists of:

ColorSlider: The root container for the color slider.
ColorSlider.Track: The component that visually represents the color slider track.
ColorSlider.Thumb: The thumb that is used to visually indicate a value in the color slider.
ColorSlider.Input: The native html input that is visually hidden in the color slider thumb.
ColorSlider.Label: The label that gives the user information on the color slider.
ColorSlider.ValueLabel: The accessible label text representing the current value in a human-readable format.

tsx
<ColorSlider>
	<ColorSlider.Label />
	<ColorSlider.ValueLabel />
	<ColorSlider.Track>
		<ColorSlider.Thumb>
			<ColorSlider.Input />
		</ColorSlider.Thumb>
	</ColorSlider.Track>
</ColorSlider>

tsx
<ColorSlider>
	<ColorSlider.Label />
	<ColorSlider.ValueLabel />
	<ColorSlider.Track>
		<ColorSlider.Thumb>
			<ColorSlider.Input />
		</ColorSlider.Thumb>
	</ColorSlider.Track>
</ColorSlider>

Example

Blue

197

Usage

A ColorSlider requires either an uncontrolled default value or a controlled value, provided using the defaultValue or value props respectively. The value provided to either of these props should be Color object. You can obtain a Color object by using the parseColor function to parse a color from a string. The channel prop must also be provided to specify which color channel the slider should display. This must be one of the channels included in the color value, for example, for RGB colors, the "red", "green", and "blue" channels are available.

Default value

Hue

0°

Controlled value

Hue

0°

Vertical Slider

Red

255

Custom Value Label

rgba(255, 0, 255, 1)

API Reference

ColorSlider

ColorSlider is equivalent to the Root import from @kobalte/core/color-slider.

Prop	Description
value	`Color` The controlled value of the slider. Must be used in conjunction with `onChange`.
defaultValue	`Color` The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
channel	`ColorChannel` The color channel that the slider manipulates.
colorSpace	`ColorSpace` The color space that the slider operates in. The `channel` must be in this color space.
onChange	`(value: Color) => void` Event handler called when the value changes.
onChangeEnd	`(value: Color) => void` Event handler called when the value changes at the end of an interaction.
getValueLabel	`(param: Color) => string` A function to get the accessible label text representing the current value in a human-readable format.
orientation	`'horizontal' \| 'vertical'` The orientation of the slider.
name	`string` The name of the slider, used when submitting an HTML form.
validationState	`'valid' \| 'invalid'` Whether the slider should display its "valid" or "invalid" visual styling.
required	`boolean` Whether the user must check a radio group item before the owning form can be submitted.
disabled	`boolean` Whether the radio group is disabled.
readOnly	`boolean` Whether the radio group items can be selected but not changed by the user.
translations	`ColorIntlTranslations` Localization strings.

Data attribute	Description
data-orientation='horizontal'	Present when the slider has horizontal orientation.
data-orientation='vertical'	Present when the slider has vertical orientation.
data-valid	Present when the slider is valid according to the validation rules.
data-invalid	Present when the slider is invalid according to the validation rules.
data-required	Present when the user must slider an item before the owning form can be submitted.
data-disabled	Present when the slider is disabled.
data-readonly	Present when the slider is read only.

ColorSlider.ValueLabel, ColorSlider.Input, ColorSlider.Thumb and ColorSlider.Track share the same data-attributes.

Rendered elements

Component	Default rendered element
`ColorSlider`	`div`
`ColorSlider.Track`	`div`
`ColorSlider.Thumb`	`span`
`ColorSlider.Input`	`input`
`ColorSlider.ValueLabel`	`div`

Accessibility

Keyboard Interactions

Key	Description
`PageUp`	Increases the value of the thumb by a larger step.
`PageDown`	Decreases the value of the thumb by a larger step.
`ArrowDown`	Decreases the value of the thumb by the step amount.
`ArrowUp`	Increases the value of the thumb by the step amount.
`ArrowRight`	Increments/decrements by the step value depending on `orientation`.
`ArrowLeft`	Increments/decrements by the step value depending on `orientation`.
`Home`	Sets the value of the thumb to the minimum value.
`End`	Sets the value of the thumb to the maximum value.