RangeSlider component
RangeSlider can be used with uncontrolled forms the same way as a native input element. Set the name attribute to include range slider value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.
Example usage of uncontrolled RangeSlider with FormData :
To change the label behavior and appearance, set the following props:
Label always visible
Custom label transition
Step matched with marks
By default, min and max values define the possible range of values. The domain prop allows setting the possible range of values independently of the min and max values:
To use RangeSlider with decimal values, set the min , max , and step props:
Use the minRange prop to control the minimum range between from and to values in RangeSlider . The default value is 10 . This ensures the thumbs must be at least the specified distance apart:
Minimum range: 20 (thumbs must be at least 20 units apart)
Value: [ 30 , 60 ] - Range: 30
Use the maxRange prop to control the maximum range between from and to values. This limits how wide the selection can be. By default, maxRange is set to Infinity :
Maximum range: 50 (selection cannot be wider than 50 units)
Value: [ 20 , 80 ] - Range: 60
The pushOnOverlap prop controls whether the thumbs should push each other when they overlap. By default, pushOnOverlap is true . If you want to disable this behavior, set it to false .
Example of pushOnOverlap={false} :
Add any number of marks to the slider by setting the marks prop to an array of objects:
Note that mark value is relative to slider value, not width:
Set restrictToMarks prop to restrict slider value to marks only. Note that in this case step prop is ignored:
You can invert the track with the inverted prop:
Hidden marks allow you to snap to specific values without displaying them visually on the track. This is useful when you want to create a "sticky" snapping behavior to certain values that you don't want to show to the user. Use this feature together with restrictToMarks prop:
Hidden marks allow you to snap to specific values without displaying them visually. Current value: [ 25 , 75 ]
RangeSlider component is accessible by default:
To label component for screen readers, add labels to thumbs:
When scale is used or the displayed value is formatted (for example as a currency or percentage), set thumbValueText to provide a human-readable value for screen readers. It is rendered as aria-valuetext on both thumbs. When a function is provided, it receives the scaled value of the corresponding thumb: