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
Installation
CLI
Manual
npx hq-kit add color-slider
With Label
Enhance the color slider by adding a label for clarity and accessibility.
Preview
Code
Orientation
By default, the color slider is horizontal. You can change it to vertical by setting the orientation
prop to vertical
.
Preview
Code
Controlled
Take direct control over the color slider's value.
Preview
Code
Disabled
Disable interaction with the color slider using the isDisabled
prop.
Preview
Code