Color Slider

Slide through gradients, picking the intensity or shade you need, as smoothly as sliding into your favorite jeans.

Basic

Glide through gradients to select the perfect intensity or shade, as effortlessly as slipping into your favorite jeans.

0°

Installation

In the terminal, run the following command to begin:
npx hq-kit add color-slider

With Label

Enhance the color slider by adding a label for clarity and accessibility.

0°

Orientation

By default, the color slider is horizontal. You can change it to vertical by setting the orientation prop to vertical.

0°

Controlled

Take direct control over the color slider's value.

216°
hsla(216, 98%, 52%, 1)

Disabled

Disable interaction with the color slider using the isDisabled prop.

0°
Color AreaColor Swatch Picker