Skip to main content

​
Overview

Slider provides an input for selecting numeric values from a continuous or discrete range. It supports single or multiple thumbs for range selection.

​
Features

  • Can be controlled or uncontrolled
  • Supports multiple thumbs
  • Supports a minimum value between thumbs
  • Supports horizontal/vertical orientation
  • Supports custom step intervals
  • Full keyboard navigation
  • Works inside forms
  • Accessible by default with proper ARIA attributes

​
Installation

npm install @radix-ui/react-slider

​
Anatomy

import * as Slider from '@radix-ui/react-slider';

export default () => (
  <Slider.Root>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
  </Slider.Root>
);

​
API Reference

​
Root

Contains all the slider component parts.
​
value
number[]
The controlled value of the slider. Must be an array of numbers.
​
defaultValue
number[]
The value when initially rendered (uncontrolled). Must be an array of numbers.
​
onValueChange
(value: number[]) => void
Event handler called when the value changes.
​
onValueCommit
(value: number[]) => void
Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
​
name
string
The name of the slider. Submitted with its owning form as part of a name/value pair.
​
disabled
boolean
When true, prevents the user from interacting with the slider.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the slider.
​
dir
'ltr' | 'rtl'
The reading direction of the slider. If omitted, inherits from the parent.
​
inverted
boolean
default:"false"
Whether the slider is visually inverted.
​
min
number
default:"0"
The minimum value for the slider.
​
max
number
default:"100"
The maximum value for the slider.
​
step
number
default:"1"
The stepping interval.
​
minStepsBetweenThumbs
number
default:"0"
The minimum permitted steps between multiple thumbs.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Track

The track that contains the range.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Range

The range part. Must live inside Track.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Thumb

A draggable thumb. You can render multiple thumbs.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as Slider from '@radix-ui/react-slider';
import './styles.css';

export default () => (
  <form>
    <Slider.Root className="SliderRoot" defaultValue={[50]} max={100} step={1}>
      <Slider.Track className="SliderTrack">
        <Slider.Range className="SliderRange" />
      </Slider.Track>
      <Slider.Thumb className="SliderThumb" aria-label="Volume" />
    </Slider.Root>
  </form>
);

​
Accessibility

Adheres to the Slider WAI-ARIA design pattern.

​
Keyboard Interactions

  • ArrowRight - Increments the value by the step amount.
  • ArrowLeft - Decrements the value by the step amount.
  • ArrowUp - Increases the value by the step amount (vertical orientation).
  • ArrowDown - Decreases the value by the step amount (vertical orientation).
  • PageUp - Increases the value by 10% of the total range.
  • PageDown - Decreases the value by 10% of the total range.
  • Home - Sets the value to the minimum.
  • End - Sets the value to the maximum.

​
Data Attributes

Root
  • [data-disabled] - Present when disabled
  • [data-orientation] - “horizontal” or “vertical”
Track
  • [data-disabled] - Present when disabled
  • [data-orientation] - “horizontal” or “vertical”
Range
  • [data-disabled] - Present when disabled
  • [data-orientation] - “horizontal” or “vertical”
Thumb
  • [data-disabled] - Present when disabled
  • [data-orientation] - “horizontal” or “vertical”

Build docs developers (and LLMs) love

Get started for freeTalk to us