RangeSlider is the 2-point alternative to the single-value
<RangeSlider /> component renders a styled range slider on the page. It will render a range from 0 to 10, and select all possible values inbetween.
Value and DefaultValue
By default, this component will select the entire range from Min to Max values. You can control the selected range by passing an array of integers to either
Like all standard form elements, you cannot interact with this component if you pass in a value without an onChange handler.
You can customize
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 range. The following example illustrates passing a value that falls outside the acceptable range.
Controlled component with an onChange callback
If you'd like to read and control the input value externally,
Slider accepts an
onChange event callback along with the
Value: 3 — 7
You change the granularity of the slider options by using the
RangeSlider accepts the standard aria-labelledby to help screen readers associate the range input with the relevant form label.
Use the readOnly property to render the component normally, but prevent user interaction.
disabled property to gray out the Input, making it a fixed value.