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:

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

Customized sliders

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

Continuous sliders

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

<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

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

With input field

Vertical sliders

Track

The track shows the range available for user selection.

Removed track

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

Inverted track

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

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 />