An input where the user selects a value from within a given range.
import React from 'react';import * as Slider from '@radix-ui/react-slider';import './styles.css';const SliderDemo = () => (<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>);export default SliderDemo;
Can be controlled or uncontrolled.
Supports multiple thumbs.
Supports a minimum value between thumbs.
Supports touch or click on track to update value.
Supports Right to Left direction.
Full keyboard navigation.
Install the component from your command line.
Import all parts and piece them together.
Contains all the parts of a slider. It will render an input
for each thumb when used within a form
to ensure events propagate correctly.
The track that contains the Slider.Range
.
The range part. Must live inside Slider.Track
.
A draggable thumb. You can render multiple thumbs.
Use the orientation
prop to create a vertical slider.
Add multiple thumbs and values to create a range slider.
Use the step
prop to increase the stepping interval.
Use minStepsBetweenThumbs
to avoid thumbs with equal values.
Adheres to the Slider WAI-ARIA design pattern.
Create your own API by abstracting the primitive parts into your own component.
This example abstracts all of the Slider
parts so it can be used as a self closing element.
Because of a limitation we faced during implementation, the following example won't work as expected and the onMouseDown
and onMouseUp
event handlers won't be fired:
We recommend using pointer events instead (eg. onPointerDown
, onPointerUp
). Regardless of the above limitation, these events are better suited for cross-platform/device handling as they are fired for all pointer input types (mouse, touch, pen, etc.).