Slider

A slider allows a user to select one or more values within a range.

import {Slider} from './Slider';

<Slider label="Opacity" />

Value

Use the value or defaultValue prop to set the slider's value. The onChange event is called as the user drags, and onChangeEnd is called when the thumb is released.

onChange value: 25
onChangeEnd value: 25

import {Slider} from './Slider';
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(25);
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <Slider
        label="Cookies to buy"
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
      <pre style={{fontSize: 12}}>
        onChange value: {currentValue}{'\n'}
        onChangeEnd value: {finalValue}
      </pre>
    </>
  );
}

Multi-thumb

Set the value or defaultValue to an array of numbers to render multiple thumbs. Each thumb should have an aria-label to describe it for assistive technologies (provided via thumbLabels here).

import {Slider} from './Slider';

<Slider
  label="Range"
  defaultValue={[30, 60]}
  thumbLabels={['start', 'end']} />

Value scale

By default, slider values are percentages between 0 and 100. Use the minValue, maxValue, and step props to set the allowed values. Steps are calculated starting from the minimum. For example, if minValue={2}, and step={3}, the valid step values would be 2, 5, 8, 11, etc.

<Slider
  label="Amount"
  maxValue={150}
  defaultValue={50}
  step={5} />

Examples

• Photo LibraryVirtualized photo grid, view transitions, folder tree, search, and drag and drop.

API

<Slider>
  <Label />
  <SliderOutput />
  <SliderTrack>
    <SliderThumb />
    <SliderThumb>
      <Label />
    </SliderThumb>
  </SliderTrack>
</Slider>

Slider

Default className: react-aria-Slider

SliderOutput

Default className: react-aria-SliderOutput

SliderTrack

Default className: react-aria-SliderTrack

SliderThumb

Default className: react-aria-SliderThumb