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.
- 📦 21 kB gzipped (but only 6 kB without @material-ui/styles).
Continuous sliders allow users to select a value along a subjective range.
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
- You can have custom marks by providing a rich array to the
- You can restrict the selectable values to those provided with the
- You can force the thumb label to be always visible with
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
- The slider, as a whole, has a label (
- Each thumb has a user-friendly name for its current value.
This is not required if the value matches the semantics of the label.
You can change the name with the