Radix homepageRadix Homepage
PrimitivesAlpha

Slider

An input where the user selects a value from within a given range.

import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA } from '@radix-ui/colors';
import * as SliderPrimitive from '@radix-ui/react-slider';
const StyledSlider = styled(SliderPrimitive.Root, {
position: 'relative',
display: 'flex',
alignItems: 'center',
userSelect: 'none',
touchAction: 'none',
width: 200,
'&[data-orientation="horizontal"]': {
height: 20,
},
'&[data-orientation="vertical"]': {
flexDirection: 'column',
width: 20,
height: 100,
},
});
const StyledTrack = styled(SliderPrimitive.Track, {
backgroundColor: blackA.blackA10,
position: 'relative',
flexGrow: 1,
borderRadius: '9999px',
'&[data-orientation="horizontal"]': { height: 3 },
'&[data-orientation="vertical"]': { width: 3 },
});
const StyledRange = styled(SliderPrimitive.Range, {
position: 'absolute',
backgroundColor: 'white',
borderRadius: '9999px',
height: '100%',
});
const StyledThumb = styled(SliderPrimitive.Thumb, {
all: 'unset',
display: 'block',
width: 20,
height: 20,
backgroundColor: 'white',
boxShadow: `0 2px 10px ${blackA.blackA7}`,
borderRadius: 10,
'&:hover': { backgroundColor: violet.violet3 },
'&:focus': { boxShadow: `0 0 0 5px ${blackA.blackA8}` },
});
const SliderDemo = () => (
<StyledSlider defaultValue={[50]} max={100} step={1} aria-label="Volume">
<StyledTrack>
<StyledRange />
</StyledTrack>
<StyledThumb />
</StyledSlider>
);
export default SliderDemo;

Features

  • 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.

npm install @radix-ui/react-slider

Import all parts and piece them together.

import * as Slider from '@radix-ui/react-slider';
export default () => (
<Slider.Root>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
</Slider.Root>
);

Contains all the parts of a slider.

PropTypeDefault
asenumspan
defaultValuenumber[]No default value
valuenumber[]No default value
namestringNo default value
disabledbooleanfalse
orientationenum"horizontal"
direnum"ltr"
minnumber0
maxnumber100
stepnumber1
onValueChangefunctionNo default value
minStepsBetweenThumbsnumber0

The track that contains the Slider.Range.

PropTypeDefault
asenumspan

The range part. Must live inside Slider.Track.

PropTypeDefault
asenumspan

A draggable thumb. You can render multiple thumbs.

PropTypeDefault
asenumspan

Use the orientation prop to create a vertical slider.

import * as Slider from '@radix-ui/react-slider';
export default () => (
<Slider.Root defaultValue={[50]} orientation="vertical">
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
</Slider.Root>
);

Add multiple thumbs and values to create a range slider.

import * as Slider from '@radix-ui/react-slider';
export default () => (
<Slider.Root defaultValue={[25, 75]}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
<Slider.Thumb />
</Slider.Root>
);

Use the step prop to increase the stepping interval.

import * as Slider from '@radix-ui/react-slider';
export default () => (
<Slider.Root defaultValue={[50]} step={10}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
</Slider.Root>
);

Use minStepsBetweenThumbs to avoid thumbs with equal values.

import * as Slider from '@radix-ui/react-slider';
export default () => (
<Slider.Root defaultValue={[25, 75]} step={10} minStepsBetweenThumbs={1}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
<Slider.Thumb />
</Slider.Root>
);

Adheres to the Slider WAI-ARIA design pattern.

KeyDescription
ArrowRightIncrements/decrements by the step value depending on orientation.
ArrowLeftIncrements/decrements by the step value depending on orientation.
ArrowUpIncreases the value by the step amount.
ArrowDownDecreases the value by the step amount.
PageUpIncreases the value by a larger step.
PageDownDecreases the value by a larger step.
Shift + ArrowUpIncreases the value by a larger step.
Shift + ArrowDownDecreases the value by a larger step.
HomeSets the value to its minimum.
EndSets the value to its maximum.

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.

Usage

import { Slider } from './your-slider';
export default () => <Slider defaultValue={[25]} />;

Implementation

// your-slider.js
import * as SliderPrimitive from '@radix-ui/react-slider';
export const Slider = React.forwardRef((props, forwardedRef) => {
const value = props.value || props.defaultValue;
return (
<SliderPrimitive.Slider {...props} ref={forwardedRef}>
<SliderPrimitive.Track>
<SliderPrimitive.Range />
</SliderPrimitive.Track>
{value.map((_, i) => (
<SliderThumb key={i} />
))}
</SliderPrimitive.Slider>
);
});