Slider

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

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.

Installation

Install the component from your command line.

npm install @radix-ui/react-slider

npm install @radix-ui/react-slider

Anatomy

Import the components and piece the parts together.

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

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

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

Basic example

Create your styled slider component from the primitive parts.

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';

const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});

const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});

const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});

const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});

export default () => (
  <StyledSlider defaultValue={[50]}>
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
  </StyledSlider>
);

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';
const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});
const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});
const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});
const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});
export default () => (
  <StyledSlider defaultValue={[50]}>
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
  </StyledSlider>
);

API Reference

Root

Contains all the parts of a slider.

Prop	Type	Default
`as`	`enum`	`span`
`defaultValue`	`number[]`
`value`	`number[]`
`name`	`string`
`disabled`	`boolean`	`false`
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	`"ltr"`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`onValueChange`	`function`
`minStepsBetweenThumbs`	`number`	`0`

Track

The track that contains the Slider.Range.

Prop	Type	Default	Required
`as`	`enum`	`span`

Range

The range part. Must live inside Slider.Track.

Prop	Type	Default	Required
`as`	`enum`	`span`

Thumb

A draggable thumb. You can render multiple thumbs.

Prop	Type	Default	Required
`as`	`enum`	`span`

Examples

Vertical orientation

Use the orientation prop to create a vertical slider.

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';

const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  width: 16,
  height: 100,
});

const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  width: 2,
});

const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  width: '100%',
});

const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});

export default () => (
  <StyledSlider defaultValue={[50]} orientation="vertical">
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
  </StyledSlider>
);

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';
const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  width: 16,
  height: 100,
});
const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  width: 2,
});
const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  width: '100%',
});
const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});
export default () => (
  <StyledSlider defaultValue={[50]} orientation="vertical">
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
  </StyledSlider>
);

Create a range

Add multiple thumbs and values to create a range slider.

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';

const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});

const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});

const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});

const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});

export default () => (
  <StyledSlider defaultValue={[25, 75]}>
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
    <StyledThumb />
  </StyledSlider>
);

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';
const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});
const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});
const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});
const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});
export default () => (
  <StyledSlider defaultValue={[25, 75]}>
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
    <StyledThumb />
  </StyledSlider>
);

Define step size

Use the step prop to increase the stepping interval.

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';

const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});

const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});

const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});

const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});

export default () => (
  <StyledSlider defaultValue={[50]} step={5}>
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
  </StyledSlider>
);

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';
const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});
const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});
const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});
const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});
export default () => (
  <StyledSlider defaultValue={[50]} step={5}>
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
  </StyledSlider>
);

Prevent thumb overlap

Use minStepsBetweenThumbs to avoid thumbs with equal values.

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';

const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});

const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});

const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});

const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});

export default () => (
  <StyledSlider
    defaultValue={[25, 75]}
    minStepsBetweenThumbs={1}
    step={5}
  >
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
    <StyledThumb />
  </StyledSlider>
);

// import { styled } from 'path-to/stitches.config';
import * as Slider from '@radix-ui/react-slider';
const StyledSlider = styled(Slider.Root, {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  userSelect: 'none',
  touchAction: 'none',
  height: 16,
});
const StyledTrack = styled(Slider.Track, {
  backgroundColor: 'gainsboro',
  position: 'relative',
  flexGrow: 1,
  height: 2,
});
const StyledRange = styled(Slider.Range, {
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  borderRadius: '9999px',
  height: '100%',
});
const StyledThumb = styled(Slider.Thumb, {
  display: 'block',
  width: 16,
  height: 16,
  backgroundColor: 'white',
  border: '1px solid lightgray',
  borderRadius: '20px',
  ':focus': {
    outline: 'none',
    borderColor: 'dodgerblue',
  },
});
export default () => (
  <StyledSlider
    defaultValue={[25, 75]}
    minStepsBetweenThumbs={1}
    step={5}
  >
    <StyledTrack>
      <StyledRange />
    </StyledTrack>
    <StyledThumb />
    <StyledThumb />
  </StyledSlider>
);

Accessibility

Adheres to the Slider WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`ArrowRight`	Increments/decrements by the `step` value depending on `orientation`.
`ArrowLeft`	Increments/decrements by the `step` value depending on `orientation`.
`ArrowUp`	Increases the value by the `step` amount.
`ArrowDown`	Decreases the value by the `step` amount.
`PageUp`	Increases the value by a larger `step`.
`PageDown`	Decreases the value by a larger `step`.
`Shift + ArrowUp`	Increases the value by a larger `step`.
`Shift + ArrowDown`	Decreases the value by a larger `step`.
`Home`	Sets the value to its minimum.
`End`	Sets the value to its maximum.