Skip to content
Edit this page

Slider

Slider generates a background element that can be used for various purposes.

<Slider />

Props

Color

size

orientation

valueLabelDisplay

disabled
marks

Steps

By passing a number to the step prop, you can change the default step increment.

5e-8
<Slider
  aria-label="Small steps"
  defaultValue={0.00000005}
  getAriaValueText={valueText}
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

Marks

By providing an array of objects to the marks prop, you can have custom marks.

20
<Slider
  aria-label="Custom marks"
  defaultValue={20}
  getAriaValueText={valueText}
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

Label always visible

You can force the thumb label to be always visible with valueLabelDisplay="on".

80
<Slider
  aria-label="Always visible"
  defaultValue={80}
  getAriaValueText={valueText}
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

Keep label at edges

For horizontal slider on mobile viewports, the value label might be offset from the track. Apply the style to keep the label at the start/end edges:

0100

Range slider

By passing an array of values to the value prop, you can use the Slider to set the start and end of a range.

2037
<Slider
  getAriaLabel={() => 'Temperature range'}
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  getAriaValueText={valueText}
/>

Track

The track shows the range available for user selection.

Removed track

The track can be turned off with track={false}.

Removed track

Removed track range slider

Inverted track

The track can be inverted with track="inverted".

Inverted track

Inverted track range

Component variables

3
<Slider />

CSS variables

px
px
px
px
px

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.