RangeSlider

Interface of RangeSlider
🏗 Coming Soon

RangeSlider is the 2-point alternative to the single-value Slider component.

Default RangeSlider

The <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.

0
10

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 value or defaultValue.

3
8
3
8

Like all standard form elements, you cannot interact with this component if you pass in a value without an onChange handler.

Min, Max

You can customize min and max values.

13
17

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.

105
195

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 prop.

Value: 37

3
7

Step

You change the granularity of the slider options by using the step prop.

0
10000

Accessibility

RangeSlider accepts the standard aria-labelledby to help screen readers associate the range input with the relevant form label.

0
10

readOnly

Use the readOnly property to render the component normally, but prevent user interaction.

2
3

Disabled

Use the disabled property to gray out the Input, making it a fixed value.

2
3