Slider.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import {Slider as VanillaSlider} from 'vanilla-starter/Slider'; import {Slider as TailwindSlider} from 'tailwind-starter/Slider'; import tailwindDocs from 'docs:tailwind-starter/Slider'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/slider/docs/anatomy.svg';

export const tags = ['range input', 'track', 'scrubber'];

Slider

{docs.exports.Slider.description}

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.

"use client";
import {Slider} from 'vanilla-starter/Slider';
import {useState} from 'react';

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

  return (
    <>
      <Slider
        label="Cookies to buy"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <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 'vanilla-starter/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.

<VisualExample component={VanillaSlider} docs={docs.exports.Slider} links={docs.links} props={['minValue', 'maxValue', 'step']} initialProps={{ label: 'Amount', minValue: 0, maxValue: 150, defaultValue: 50, step: 5 }} />

Examples

API

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

Slider

SliderOutput

SliderTrack

SliderThumb