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} />

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 '@react-spectrum/s2';
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>
    </>
  );
}

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}
  fillOffset={75} />

API