A Slider is a component that allows the user to select a number value from a specific range of numbers. This component is fully controlled and requires the use of the useSlider hook to provide the value and "controls" to updating the value. The hook allows for customizing the min, max, and step options.

The Slider also requires a baseId and either a label, an aria-label, or an aria-labelledby for accessibility.

Check out the examples below to see how to use the useSlider hook and a few of the styling props available for the Slider.

A RangeSlider is another implementation of a slider that allows the user to select a min and max value from a specific range of numbers. Like the Slider, this component is fully controlled and requires the use of the useRangeSlider hook to provide the value and "controls" to updating the value. The hook allows for customizing the min, max, and step options.

The RangeSlider also requires providing accessible labels for each "thumb" by one of the available label props:

• thumb1Label - defaults to "Min"
• thumb1LabelledBy
• thumb2Label - defaults to "Max"
• thumb2LabelledBy

Check out the examples below to see how to use the useRangeSlider hook and a few of the styling props available for the RangeSlider.

As mentioned above, the useSlider provides an object of controls as the second argument which is required to update the slider's value. The controls include the following functions:

• increment - increment the value by the current step amount unless already at the max value
• decrement - decrement the value by the current step amount unless already at the min value
• minimum - set the value to the min amount
• maximum - set the value to the max amount
• setValue - a React "set state dispatcher" which can be used to set the value of the slider manually

This example will show how you can use the controls provided by the useSlider to link a TextField to the Slider and render it inline.

The Slider and RangeSlider also support rendering a tooltip of the current value while the user is dragging or focusing the slider thumb. This can be enabled with the discrete prop.

The useSlider (and useRangeSlider) support an updateOn option that can be used to make the slider's value only update once the user has blurred the slider's thumb or completed dragging. This is useful when you don't need to use the value immediately and can be activated by setting updateOn: "blur".

There is also an onChange callback that can be used along with this updated behavior if desired.

This example allows you to configure some of the different props for the Slider component and showcasing the updateOn behavior.