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.

Preview

Code

0°

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

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Color Slider's decked out with several components to make it bangin'.

Swipe left or right to adjust values, like sliding the volume on your stereo, perfect for gradual control.

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

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

And next, you can copy the code below and paste it into your dopest component folder.

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

Preview

Code

Color Customizer0°

The color slider typically displays the selected value. To hide this output, set showOutput to false.

Preview

Code

Take direct control over the color slider's value.

Preview

Code

216°

hex#0D6DFD

hexa#0D6DFDFF

rgbrgb(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)

Disable interaction with the color slider using the isDisabled prop.

Preview

Code

0°