Intro
A range slider enables the user to select a value range within a given numeric interval.
https://www.sap.com/design-system/live-examples/Range_Slider/RangeSlider_LE_main.html
Range slider – live example
When to Use
Do
Use the range slider:
- To provide graphical support for selecting a value range within a given numeric interval.
Don't
Don’t use the range slider:
- If the user only needs to select a single value within a predefined range. Use the slider instead.
Anatomy
- Start point: Minimum value of the slider range.
- Track (active or inactive)
- Focused slider handle: Active handle for setting the value in focus.
- Non-focused slider handle: Inactive handle indicating the other selected value.
- Tooltip (optional): Displays a tooltip with the current value above the handle.
- Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.
- Labels (optional): Labels some or all of the tick marks with their values.
- End point: Maximum value of the slider range.
Anatomy of a range slider
Types
The following range slider variants are available:
Range slider with tooltip
Range slider with tooltip, tick marks, and labels
Behavior and Interaction
Changing the Value Range
If the range slider is editable, the hand cursor appears when the user hovers over the range slider. If tooltips have been activated, hovering over the slider also displays tooltips showing the current values for each handle. The handles move together with the corresponding tooltips.
The user can change the value range on the slider:
- By using drag and drop to adjust the handles. The handle snaps to the nearest incremental value.
- By clicking the track outside the selected value range. The corresponding handle then moves to the new position.
- By using the key combination Ctrl/Cmd + Arrow keys.
https://www.sap.com/design-system/live-examples/Range_Slider/RangeSlider_LE_Behaviour.html
Range slider with tooltip, tick marks, and labels – live example
Moving the Entire Range
Users can move the entire value range by dragging and dropping the active segment of the track.
Equal Values
The handles of the range slider can be positioned on the same value.
Overlapping
The handles of the range slider can be moved across each other. The minimum can become the maximum, and vice versa.
Responsive Behavior
The range slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the component.
Related Links
Components
Implementation
- Range Slider
(UI5 Web Components documentation)
Specifications
- Range Slider (visual design)
- Range Slider (interaction design)
Components
Implementation
- Range Slider
(UI5 Web Components documentation)