The React Range Slider component allows users to select a value or range of values within a predefined range. Unlike the standard <input type="range">, the Range Slider offers enhanced customization options, including multiple handles, labels, tooltips, and vertical orientation. It ensures consistent styling across browsers and provides a rich set of features for advanced use cases.

Enable multiple handles to allow the selection of a range or/and multiple values.

Rotate the slider to a vertical orientation.

Disable the slider to prevent user interaction.

React Range Slider component has implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

Sets the minimum distance between multiple slider handles by setting distance and ensures that the handles do not overlap or get too close.

Add labels to specific points on the slider for better context. If you provide an array of strings, as in the example below, then labels will be spaced at equal distances from the beginning to the end of the slider.