Slider

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

📦 22 kB gzipped (but only 8 kB without @material-ui/styles).

Discrete sliders

Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos:

You can generate a mark for each step with marks={true}.
You can change the default step increment.
You can have custom marks by providing a rich array to the marks prop.
You can restrict the selectable values to those provided with the marks prop with step={null}.
You can force the thumb label to be always visible with valueLabelDisplay="on".

Temperature

Small steps

5e-8

Custom marks

Restricted values

Always visible

Customized sliders

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

iOS

pretto.fr

Tooltip value label

Airbnb

Continuous sliders

Continuous sliders allow users to select a value along a subjective range.

Volume

<Typography id="continuous-slider" gutterBottom>
  Volume
</Typography>
<Grid container spacing={2}>
  <Grid item>
    <VolumeDown />
  </Grid>
  <Grid item xs>
    <Slider value={value} onChange={handleChange} aria-labelledby="continuous-slider" />
  </Grid>
  <Grid item>
    <VolumeUp />
  </Grid>
</Grid>
<Slider disabled defaultValue={30} aria-labelledby="continuous-slider" />

Range sliders

Temperature range

2037

<Typography id="range-slider" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="range-slider"
  getAriaValueText={valuetext}
/>

With input field

Volume

Vertical sliders

Temperature

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 multi-values

Inverted track

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

Inverted track

Inverted track range

Non-linear scale

You can use the scale prop to represent the value on a different scale. For instance, in the following demo, the value x represents the power of 10^x.

Temperature range

1e^0

<Typography id="non-linear-slider" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  min={0}
  step={0.1}
  max={6}
  scale={x => x ** 10}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)

The component handles most of the work necessary to make it accessible. However, you need to make sure that:

Each thumb has a user-friendly label (aria-label, aria-labelledby or getAriaLabel prop).
Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the getAriaValueText or aria-valuetext prop.

API

<Slider />