Components

Color Slider

A horizontal or vertical slider used to adjust individual color properties like hue, saturation, or brightness.

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

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Color Slider comes packed with several components to enhance functionality and provide a seamless experience.

A draggable indicator within color selection tools, allowing users to fine-tune their chosen color.
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

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°

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Color Picker
Next
Color Swatch