Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenColor 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.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
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'.
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.
Orientation
By default, the color slider is horizontal. You can change it to vertical by setting the orientation prop to vertical.
Controlled
Take direct control over the color slider's value.
Disabled
Disable interaction with the color slider using the isDisabled prop.