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

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

Range Slider inputs automatically “snap” to whole numbers. To modify this behavior, set a step value. In the example below, we increase the number of steps by specifying step="0.25".

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.