Slider
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Use defaultValue
prop for default slider value and disabled
prop for disabled slider.
Basic Slider
Disabled Slider
Manage value
prop with the help of a state for controlled slider and use defaultValue
prop for uncontrolled slider.
Controlled Slider
Uncontrolled Slider
You can generate a mark for each step with marks
prop.
You can change the default step increment with step
prop.
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'
.
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.
Use color
prop for different colored slider.
Secondary Slider
Error Slider
Warning Slider
Info Slider
Success Slider
Use orientation='vertical'
prop for vertical slider.
Use styled
hook to customize your slider.
The track can be turned off with track={false}
prop.
Use size
prop for different sizes of slider.
Small
Medium
You can enforce a minimum distance between values in the onChange
event handler.
The track can be inverted with track='inverted'
prop.