Range slider.
Selects an interval using two thumbs on one track.
See it in context
What it is
The lower and upper handles define the endpoints of a selected range. This pattern is useful for filtering prices or time spans while showing the available domain.
When to use it
Identify each endpoint and prevent the lower value from exceeding the upper value.
Know the difference
A single slider chooses one value; a range slider chooses a pair of bounds.
Across platforms
Web
Use a native button for an action and an anchor for navigation. Preserve keyboard activation and a visible focus indicator.
iOS · iPadOS · Android
Provide a comfortable touch target, use familiar system symbols when appropriate, and show a clear pressed or selected state.
macOS · Windows · Linux
Keep pointer, keyboard, and focus behavior consistent. Common commands can additionally expose a menu item or keyboard shortcut.
Go to the source
Primary documentation for the pattern and its platform conventions.