RangeSlider

About RangeSlider

RangeSlider lets the user select both ends of a numeric range — minimum and maximum — with two independent draggable handles. The track between handles fills with the brand color to communicate the selected range visually.

Use it where the user cares about both endpoints, not just one value. Step size, min/max bounds, and tick marks are all configurable. Keyboard support lets each handle move independently with arrow keys.

When to use it

• Price-range filters in product browsing.
• Age range pickers in demographics forms.
• Date-distance windows where exact dates aren't needed.
• Threshold pairs in monitoring and alerting configuration.

Common props