MUI Slider - Example & Tutorial

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Slider

Use defaultValue prop for default slider value and disabled prop for disabled slider.

Basic Slider

Disabled Slider

Controlled and Uncontrolled

Manage value prop with the help of a state for controlled slider and use defaultValue prop for uncontrolled slider.

Controlled Slider

Uncontrolled Slider

Discrete Slider

You can generate a mark for each step with marks prop.

Small Steps

You can change the default step increment with step prop.

Custom Marks

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

Restricted Values

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

Label Always Visible

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

Range Slider

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

Colors

Use color prop for different colored slider.

Secondary Slider

Error Slider

Warning Slider

Info Slider

Success Slider

Vertical Sliders

Use orientation='vertical' prop for vertical slider.

Customized Slider

Use styled hook to customize your slider.

Removed Track

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

Sizes

Use size prop for different sizes of slider.

Small

Medium

Minimum Distance

You can enforce a minimum distance between values in the onChange event handler.

Inverted Track

The track can be inverted with track='inverted' prop.