Colors

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

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Color Slider comes packed with a variety of components to make it stand out.

Color Thumb

A color thumb is a circular element that can be dragged to change the color value.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

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°
hex#0D6DFDhexa#0D6DFDFFrgbrgb(13, 109, 253)rgbargba(13, 109, 253, 1)hslhsl(216, 98%, 52%)hslahsla(216, 98%, 52%, 1)hsbhsb(216, 94.99%, 99.04%)hsbahsba(216, 94.99%, 99.04%, 1)

Disabled

Disable interaction with the color slider using the isDisabled prop.

0°
Tag GroupCommand Menu