Color Slider
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/color-slider
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.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components
Anatomy
import { ColorSlider } from "@/components/ui/color-slider"
<ColorSlider channel="hue" />Examples
With label
Add a label to identify the color channel.
Orientation
By default, the color slider is horizontal. You can change it to vertical by setting the orientation prop to vertical.
Controlled
Pass value and update it with onChange to control the color slider.
Disabled
Disable interaction with the color slider using the isDisabled prop.
Component API
ColorSlider
ColorSlider extends the React Aria Components <ColorSlider> component.
classNamestringColorSliderOutput
ColorSliderOutput extends the React Aria Components <SliderOutput> component.
classNamestringColorSliderTrack
ColorSliderTrack extends the React Aria Components <SliderTrack> component.
classNamestringSee the React Aria for the full API reference.
