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.
- Value Indicator (optional): Displays a value indicator 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 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 value indicator
Range slider with value indicator, tick marks, and labels
Custom Scale
Range sliders allow you to define a custom scale (for example, with descriptive text instead of numeric values). This gives you full control over the labels, their placement, density, and text.
Choose custom values that are as short and as meaningful as possible.
Range slider with custom scale
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 value indicators have been activated, hovering over the slider also displays value indicators showing the current values for each handle. The handles move together with the corresponding value indicator.
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 value indicators, 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)