Slider is used for selecting a single value. If you need to specify a range of values, use the
RangeSlider component instead.
<Slider /> component renders a styled range slider on the page, with no accompanying label.
Value, Min, Max
<Slider /> component accepts a
value property, allowing the user to set the initial value at which the slider is initialized.
It also accepts
Min and max default to the following values:
- min: 0
- max: 10
The slider component will disregard any value prop that goes outside of the defined min or max. The following example illustrates default settings when
Controlled component with an onChange callback
If you'd like to read and control the input value externally,
Slider accepts an onChange event callback.
Just like the standard HTML range input, you change the granularity of slider options by using the
Slider accepts the standard aria-labelledby to help screen readers associate the range input with the relevant form label.
Use the disable property to gray out the Input, making it a fixed value.