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.

Continuous sliders

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

Sizes

For smaller slider, use the propsize="small".

Discrete sliders

Discrete sliders can be adjusted to a specific value by referencing its value indicator.You can generate a mark for each step withmarks={true}.

Small steps

You can change the default step increment.Make sure to adjust theshiftStep prop (the granularity with which the slider can step when using Page Up/Down or Shift + Arrow Up/Down) to a value divisible by thestep.

Custom marks

You can have custom marks by providing a rich array to themarks prop.

Restricted values

You can restrict the selectable values to those provided with themarks prop withstep={null}.

Label always visible

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

Range slider

The slider can be used to set the start and end of a range by supplying an array of values to thevalue prop.

Minimum distance

You can enforce a minimum distance between values in theonChange event handler.By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with thedisableSwap prop.If you want the range to shift when reaching minimum distance, you can utilize theactiveThumb parameter inonChange.

Slider with input field

In this example, an input allows a discrete value to be set.

Color

Customization

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

Music player

Vertical sliders

Set theorientation prop to"vertical" to create vertical sliders. The thumb will track vertical movement instead of horizontal movement.

.MuiSlider-thumb input{-webkit-appearance: slider-vertical;}

Marks placement

You can customize your slider by adding and repositioning marks for minimum and maximum values.

Track

The track shows the range available for user selection.

Removed track

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

Inverted track

The track can be inverted withtrack="inverted".

Non-linear scale

You can use thescale prop to represent thevalue on a different scale.

In the following demo, the valuex represents the value2^x.Increasingx by one increases the represented value by factor2.

Accessibility

(WAI-ARIA:https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)

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 orgetAriaLabel 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 thegetAriaValueText oraria-valuetext prop.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Slider />