onChangeEnd callback is called when user the slider is stopped from being dragged or value is changed with keyboard.
You can use it as a debounced callback to avoid too frequent updates.
onChange value: 50
onChangeEnd value: 50
To change label behavior and appearance, set the following props:
label– formatter function, accepts value as an argument, set null to disable label, defaults to
f => f
labelAlwaysOn– if true – label will always be displayed, by default label is visible only when user is dragging
labelTransitionProps– props passed down to the Transition component, can be used to customize label animation
Label always visible
Custom label transition
Step matched with marks
Add any number of marks to slider by setting
marks prop to an array of objects:
Note that mark value is relative to slider value, not width:
You can use the
scale prop to represent the value on a different scale.
In the following demo, the value
x represents the value
x by one increases the represented value by 2 to the power of
You can invert the track with the
Component Styles API
Hover over selectors to highlight corresponding elements
Example of using Styles API to change
RangeSlider do not provide vertical orientation as it is very rarely used.
If you need this feature you can build it yourself with use-move hook.
RangeSlider components are accessible by default:
- Thumbs are focusable
- When the user uses mouse to interact with the slider, focus is moved to the slider track, when the user presses arrows focus is moved to the thumb
- Value can be changed with arrows with step increment/decrement
To label component for screen readers, add labels to thumbs:
|ArrowRight/ArrowUp||Increases slider value by one step|
|ArrowLeft/ArrowDown||Decreases slider value by one step|
|Home||Sets slider value to min value|
|End||Sets slider value to max value|