Slider

Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

import {Slider} from '@react-spectrum/s2';

<Slider label="Cookies" defaultValue={30} />

Controlled

import {Slider} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(25);
  let [lastValue, setLastValue] = useState(value);

  return (
    <>
      <Slider
        label="Cookies to buy"
        value={value}
        onChange={setValue}
        onChangeEnd={setLastValue} />
      <p>Current value: {value}</p>
      <p>Last value: {lastValue}</p>
    </>
  );
}

Value scale

By default, slider values are percentages between 0 and 100. A different scale can be used by setting the minValue and maxValue props.

The step prop can be used to snap the value to certain increments. The 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} />

Props