Intro
A slider enables the user to adjust a single value within a specified numerical range.
https://www.sap.com/design-system/live-examples/Slider/Slider_LE_main.html
Slider – live example
When to Use
Do
Use the slider:
- If you want to provide graphical support for changing a value.
Don't
Don’t use the slider:
- For decorative purposes.
Anatomy
1. Start point: Minimum value of the slider range.
2. Track (active or inactive)
3. Slider handle: Grip for setting the value.
4. Value Indicator (optional): Displays a value indicator with the current value above the handle.
5. Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.
6. Labels (optional): Labels some or all of the tick marks with their values.
7. End point: Maximum value of the slider range.
Anatomy of a slider
Types
The following slider variants are available:
https://www.sap.com/design-system/live-examples/Slider/slider_SE_VariantsSliderwithTooltip.html
Slider with value indicator
https://www.sap.com/design-system/live-examples/Slider/slider_SE_VariantsTickmarksTooltipLabels.html
Slider with value indicator, tick marks, and labels
Custom Scale
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.
Slider with custom scale
Behavior and Interaction
Changing the Value
If the slider is editable, the hand cursor appears when the user hovers over the slider.
The user can change the slider setting in the following ways:
- By using drag and drop to adjust the handle. The handle snaps to the nearest interval value.
- By clicking the track. The handle then moves to this new position.
- By using the key combination Shift/Cmd + Arrow keys.
https://www.sap.com/design-system/live-examples/Slider/slider_LE_Behaviour.html
Slider with value indicator, tick marks, and labels – live example
Responsive Behavior
The slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the component.