Slider

UsageCopy Anchor Link

import { Slider } from '@heroui/react';

AnatomyCopy Anchor Link

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

export default () => (
  <Slider step={10}>
    <Label />
    <Slider.Output />
    <Slider.Track>
      <Slider.Fill />
      <Slider.Steps />
      <Slider.Thumb />
    </Slider.Track>
    <Slider.Marks>
      <Slider.Mark value={0} />
      <Slider.Mark value={50} />
      <Slider.Mark value={100} />
    </Slider.Marks>
  </Slider>
)

Slider.Steps and Slider.Marks are optional. Compose them independently as needed.

ExamplesCopy Anchor Link

StepsCopy Anchor Link

Place Slider.Steps inside Slider.Track to display a dot at each increment defined by minValue, maxValue, and step. The step prop controls value increments even without visible dots.

Dots start at minValue. If maxValue is not on a step, no extra dot is added at that endpoint. Invalid ranges and ranges requiring more than 1,000 dots omit the indicators.

MarksCopy Anchor Link

Place Slider.Marks directly after Slider.Track as a sibling, and add Slider.Mark children with a required value. Each label is positioned at its value, so marks can be unevenly spaced and do not need to match the step increments.

Use children for custom labels. Without children, a mark displays its value using the slider's locale and formatOptions. Marks outside the slider's bounds, or with non-finite values, are not rendered. Marks are labels; they do not change the value or snapping behavior.

Steps and MarksCopy Anchor Link

Combine dots and labels independently. Fractional steps are supported; this example uses step={0.1} with labels at 0, 0.5, and 1.

Range with Steps and MarksCopy Anchor Link

For a single thumb, dots and marks from the minimum through the selected value receive data-filled="true". For a range, only those between the first and last thumbs receive it, including the endpoints.

Vertical Steps and MarksCopy Anchor Link

Dots and labels follow orientation="vertical" automatically. Give vertical sliders a container with a defined height. Horizontal indicators also follow the locale's right-to-left direction.

DisabledCopy Anchor Link

Range Slider AnatomyCopy Anchor Link

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

export default () => (
  <Slider defaultValue={[25, 75]}>
    <Label />
    <Slider.Output />
    <Slider.Track>
      {({state}) => (
        <>
          <Slider.Fill />
          {state.values.map((_, i) => (
            <Slider.Thumb key={i} index={i} />
          ))}
        </>
      )}
    </Slider.Track>
  </Slider>
)

VerticalCopy Anchor Link

RangeCopy Anchor Link

Controlled ValueCopy Anchor Link

Control the value with value and onChange.

Custom Value FormattingCopy Anchor Link

Use formatOptions to format the displayed value. This example formats it as USD.

Custom OutputCopy Anchor Link

Customize Slider.Output to control how the selected values are shown.

Render FunctionCopy Anchor Link

CustomizationCopy Anchor Link

Tailwind CSSCopy Anchor Link

Global CSSCopy Anchor Link

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

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

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

  .slider__track {
    @apply relative h-2 w-full rounded-full bg-surface-secondary;
  }

  .slider__fill {
    @apply absolute h-full rounded-full bg-accent;
  }

  .slider__thumb {
    @apply size-4 rounded-full bg-accent border-2 border-background;
  }
}

Styling ReferenceCopy Anchor Link

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

CSS ClassesCopy Anchor Link

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

Base ClassesCopy Anchor Link

• .slider - Base slider container
• .slider__output - Output element displaying current value(s)
• .slider__track - Track element containing fill, optional step dots, and thumbs
• .slider__fill - Fill element showing selected range
• .slider__thumb - Individual thumb element
• .slider__steps - Decorative step indicator container inside the track
• .slider__step - Individual step dot
• .slider__marks - Mark label container after the track
• .slider__mark - Individual value-positioned label

State ClassesCopy Anchor Link

• .slider[data-disabled="true"] - Disabled slider state
• .slider[data-orientation="vertical"] - Vertical orientation
• .slider__thumb[data-dragging="true"] - Thumb being dragged
• .slider__thumb[data-focus-visible="true"] - Thumb keyboard focused
• .slider__thumb[data-disabled="true"] - Disabled thumb state
• .slider__track[data-fill-start="true"] - Fill starts at beginning
• .slider__track[data-fill-end="true"] - Fill ends at end
• .slider__step[data-filled="true"] - Step dot within the selected interval
• .slider__mark[data-filled="true"] - Mark label within the selected interval

Indicator Data AttributesCopy Anchor Link

Interactive StatesCopy Anchor Link

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 ReferenceCopy Anchor Link

SliderCopy Anchor Link

Slider.OutputCopy Anchor Link

Slider.TrackCopy Anchor Link

Slider.FillCopy Anchor Link

Slider.ThumbCopy Anchor Link

Slider.StepsCopy Anchor Link

Renders decorative dots inside Slider.Track using the root slider's bounds and step. It generates its own children and accepts standard DOM props and a ref.

Slider.MarksCopy Anchor Link

Contains Slider.Mark children. Place it directly inside Slider, after Slider.Track. Accepts standard DOM props and a ref.

Slider.MarkCopy Anchor Link

A label positioned at a value within Slider.Marks. Accepts standard DOM props and a ref.

Render PropsCopy Anchor Link

When using render functions with Slider.Output or Slider.Track, these values are provided:

AccessibilityCopy Anchor Link

The Slider 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
• Right-to-left (RTL) language support
• Step dots are decorative, hidden from assistive technology, and add no tab stops
• Mark labels remain readable text and do not replace the slider's accessible label or value announcements

For more information, see the React Aria Slider documentation.

Related ComponentsCopy Anchor Link