Slider for React Aria

Drag a thumb between a min and a max when a rough value is enough.

Use it for volume, a price range, or temperature. When the number has to be exact, use a Number Input. In React, React Aria can report when the drag ends, so save then instead of on every step.

Installation

Anatomy

Slider
├── SliderLabel
├── SliderThumb
├── SliderValue
├── SliderTrack
├── SliderRange
├── SliderControl
├── SliderMarkerGroup
├── SliderMarker
└── SliderDraggingIndicator

Usage

import { Slider } from "@/components/ui/slider";

const SliderDemo = () => (
  <Slider
    aria-label="Slider"
    className="mx-auto w-full max-w-xs"
    defaultValue={[75]}
    maxValue={100}
    step={1}
  />
);

Accessibility

Demos

Range

Two thumbs, starting at 25 and 50, stepping by 5. The filled stretch between them is the selection, a price band or a time window. Use two thumbs when both ends are the user's choice, since a single thumb plus a fixed minimum draws the wrong picture when one end is not actually fixed. The thumbs stay in order as they move.

Multiple

Three thumbs, at 10, 20, and 70, stepping by 10, and they cannot pass through each other. Use more than two when the track is cut into bands, such as low, medium, and high thresholds, rather than a single from-to span. Two thumbs already cover a minimum and a maximum. A third thumb is a third decision.

Vertical

Two tracks with orientation set to vertical, each given a height, one starting at 50 and the other at 25. Up and down move the thumb. Use a vertical slider beside a tall preview, or anywhere a horizontal track would stretch the row for a single number. Without a height, the track has no distance to travel.

Controlled

Temperature runs from 0 to 1 in steps of a tenth, with two thumbs and the value kept in state. The readout beside the label prints both numbers as they move. Control the slider when that number is shown elsewhere, plotted, or saved while the thumb is still down. If the form can read it on submit, uncontrolled is the smaller choice.

Disabled

disabled parks the thumb at 50, and dragging and the arrow keys do nothing. Use a disabled slider when a parent switch or a plan has turned the setting off and the last value is still useful to see. Remove the slider when the setting does not apply. A track that cannot move is only worth the space as an explanation.

Rtl

One thumb at 75, with dir set to rtl. The track follows the page direction, and the value is still a number from the minimum to the maximum, so a volume of 75 does not become 25 because the page is mirrored. Use this on a page that is already right-to-left. Do not set dir on a single slider in an otherwise left-to-right layout.

FAQ

API Reference