ColorSlider

Import

import { ColorSlider, Label } from '@heroui/react';

Usage

Anatomy

Import the ColorSlider component and access all parts using dot notation.

import { ColorSlider, Label } from '@heroui/react';

export default () => (
  <ColorSlider channel="hue" defaultValue="hsl(0, 100%, 50%)">
    <Label>Hue</Label>
    <ColorSlider.Output />
    <ColorSlider.Track>
      <ColorSlider.Thumb />
    </ColorSlider.Track>
  </ColorSlider>
)

Vertical

Disabled

Controlled

HSL Channels

Use multiple ColorSliders to control different channels of a color value. The sliders can share the same color value to create a complete color picker.

Alpha Channel

The alpha channel slider shows a transparency checkerboard pattern to help visualize the transparency level.

RGB Channels

You can also use RGB color space with red, green, and blue channels.

Custom Render Function

Styling

Passing Tailwind CSS classes

import { ColorSlider, Label } from '@heroui/react';

function CustomColorSlider() {
  return (
    <ColorSlider channel="hue" defaultValue="hsl(0, 100%, 50%)" className="w-full">
      <Label>Hue</Label>
      <ColorSlider.Output className="text-muted text-sm" />
      <ColorSlider.Track className="h-6 rounded-full">
        <ColorSlider.Thumb className="size-5 rounded-full border-2 border-white" />
      </ColorSlider.Track>
    </ColorSlider>
  );
}

Customizing the component classes

To customize the ColorSlider component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .color-slider {
    @apply flex flex-col gap-2;
  }

  .color-slider__output {
    @apply text-muted text-sm;
  }

  .color-slider__track {
    @apply relative h-5 w-full rounded-full;
  }

  .color-slider__thumb {
    @apply size-4 rounded-full border-3 border-white shadow-overlay;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ColorSlider component uses these CSS classes (View source styles):

Base Classes

• .color-slider - Base slider container
• .color-slider__output - Output element displaying current value
• .color-slider__track - Track element with color gradient
• .color-slider__thumb - Thumb element showing current color

State Classes

• .color-slider[data-disabled="true"] - Disabled slider state
• .color-slider[data-orientation="vertical"] - Vertical orientation
• .color-slider__thumb[data-dragging="true"] - Thumb being dragged
• .color-slider__thumb[data-focus-visible="true"] - Thumb keyboard focused
• .color-slider__thumb[data-disabled="true"] - Disabled thumb state

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"] on thumb
• Focus: :focus-visible or [data-focus-visible="true"] on thumb
• Dragging: [data-dragging="true"] on thumb
• Disabled: :disabled or [data-disabled="true"] on slider or thumb

API Reference

ColorSlider Props

Inherits from React Aria ColorSlider.

ColorSlider.Output Props

ColorSlider.Track Props

ColorSlider.Thumb Props

RenderProps

When using render functions, these values are provided:

Accessibility

The ColorSlider component implements the ARIA slider pattern and provides:

• Full keyboard navigation support (Arrow keys, Home, End, Page Up/Down)
• Screen reader announcements for value changes
• Proper focus management
• Support for disabled states
• HTML form integration via hidden input elements
• Internationalization support with locale-aware value formatting

For more information, see the React Aria ColorSlider documentation.