Intro
The slider lets users select a value within a predefined numeric or non-numeric interval by dragging a handle along a track.
Slider component
Component availability
The component is available in the following libraries:
When to Use
Use the slider to:
- Adjust a value along a continuous or gradual range.
- Handle values that change smoothly, such as volume or brightness.
- Allow people to make quick adjustments without typing.
- Provide immediate visual feedback as the handle moves.
Don’t use the slider to:
- Make specific choices, such as selecting a category or an item from a list. Consider using radio buttons or checklists instead.
- Make selections without full accessibility support. Ensure keyboard interaction, visible value indicators, and clear min and max labels. Alternatively, use dropdowns or input fields.
- Make selections when space is limited. On small screens, sliders can take up too much room. Consider using smaller input options when the screen is crowded.
- Always label the slider to indicate what the selected value represents.
- When using custom sliders, keep labels short and meaningful to maintain a clear, easy-to-read, and visually balanced descriptive scale.
- Use steps that match the required precision. Smaller steps help users choose more exact values when necessary.
- If relevant, display the unit of measurement next to or inside the slider or its related input field (for example, %, kg, or °C).
- Display the current value near the slider or in a connected input field to enhance clarity and ease of use.
Anatomy
- Start point: Minimum value of the slider range.
- Track (active or inactive): Shows the slider range. The active track extends from the start point to the current value, and the inactive track covers the remainder of the range.
- Value indicator (optional): Displays the current value and can switch to an input field for direct editing.
- Tick marks (optional): Represent the value steps. Each tick mark corresponds to a selectable value.
- End point: Maximum value of the slider range.
- Labels (optional): Display the values for selected tick marks along the slider.
- Slider handle: Draggable grip used to select a value.
Anatomy of a slider
Types
Basic slider
Standard slider with a handle and track for selecting a value within a defined range. It includes no additional elements, such as a value indicator or tick marks. Use when the value selection is simple, and no additional visual guidance is required.
Basic slider
Slider without progress bar
A slider without a progress bar is useful when visual emphasis on the current value is not required.
Slider without progress bar
Slider with value indicator
The value indicator appears above the handle to show or edit the current value. Use this option when precise feedback or direct manual entry is required.
A. Value indicator: Displays the current value above the handle.
B. Editable value indicator: Displays the current value above the handle in an input field that users can edit directly.
Slider with value Indicator – display and edit mode
Slider with tick marks and labels
Tick marks appear along the track to represent value steps. Labels can be added to selected tick marks to show their values. Use this variant when the range includes predefined or incremental values.
Slider with tick marks and labels
Custom scale and custom value indicators :badge, info, large, _, SAPUI5 only:
The slider supports custom scales and value indicators, allowing descriptive labels instead of numeric values. Labels should be concise and meaningful to ensure clarity and usability. When labels are longer, the number of tick marks should be reduced to prevent visual clutter.
Slider with custom scale and value indicator
States
Components change their appearance based on their state, which helps users predict outcomes and understand how to interact with them.
Component states
The slider supports two component states: enabled and disabled.
A. Enabled: The slider is interactive and the user can adjust the value.
B. Disabled: The slider is non-interactive and cannot be adjusted.
For more information, see Component States.
Slider component states
Interaction states
The slider has three interaction states: regular, hover, and down.
A. Regular: The default state for a component.
B. Hover: When the cursor is over the handle, it highlights to indicate it can be adjusted.
C. Down: Shown while the handle is pressed or being dragged.
For more information, see Interaction States.
Slider interaction states
Focus state
When the handle is focused, it displays a visible border with a transparent fill, so the current value remains visible beneath it.
For more information, see Focus States.
Slider focus state
Behavior and Interaction
Dragging the handle to adjust the value
Users can drag the handle to precisely adjust the value within a defined range. The behavior follows these steps:
A. Default state: The slider is in its default state. The handle is placed either at a default range value (such as 0 and 100) or at a position defined by your application.
B. Clicking the handle: When a user clicks on the handle, it becomes transparent, ensuring that the current value underneath remains visible and easy to track.
C. Dragging the handle: The user can drag the handle along the track to adjust the value. If the value indicator is enabled, it remains visible throughout the interaction and provides real-time feedback by continuously updating as the user moves the handle.
This behavior offers direct manipulation and immediate feedback, making the slider ideal for scenarios where continuous value adjustment is necessary, such as setting a volume level, a percentage, or a specific range.
Dragging a handle to adjust a value
Clicking on the track to adjust the value
Users can also adjust a value by interacting directly with the track itself. Clicking the track moves the handle to the clicked position.
A. Start of interaction: The slider is in its default state, with either a predefined value or a value that was previously modified.
B. End of interaction: When a user clicks anywhere on the track, the component instantly repositions the handle to that clicked location. This new position then becomes the slider’s current value, and the component updates accordingly.
This functionality is ideal for scenarios where users need to make quick, approximate selections or large jumps in value, rather than fine-tuned adjustments. For example, a user might click the track to jump from 20% to 80% quickly, then drag the handle for a precise adjustment from 80% to 83%.
Clicking or tapping the track moves the handle to a new point
Snapping
The snapping mechanism in a slider is based on preconfigured step intervals. When the user drags the handle or clicks the track, the handle snaps to the nearest value according to the configured step interval. This feature helps users make accurate adjustments with ease and confidence, minimizing the likelihood of errors.
A. Start of interaction: As the user drags the handle to a new position, or after they click on the track, the component determines the intended value.
B. End of interaction: When the user releases the handle or after the click is registered, the handle automatically snaps to the nearest tick mark according to the component’s configured step interval. Simultaneously, the value indicator updates accordingly.
This snapping functionality is ideal for scenarios where continuous, free-form value selection is not desired. For example, you might use snapping to select quantities in whole numbers, adjust time intervals in 15-minute increments, or set percentages with specific jumps like 25%, 50%, 75%, and 100%. It reduces user error by only allowing valid selections and provides immediate visual confirmation of the chosen increment.
Tick marks snapping by handle dragging
Editable value indicator
If the value indicator is editable, it switches to an input field, so the user can type a specific value instead of dragging the handle.
A. Start of interaction: The component allows the user to directly click on the value indicator, which then transforms into an input field. The user types a new value and then presses the Enter key to confirm their input.
B. End of interaction: The handle moves to its new position, and the value indicator updates accordingly.
This functionality provides flexibility. It’s ideal for scenarios where numeric precision is crucial, or when users find typing more efficient than visual adjustment.
Editing a value using the value indicator
Responsiveness
By default, the slider takes the width of its parent container. It supports both cozy and compact form factors.
Tick marks and labels
When space becomes limited, the slider hides labels and tick marks to prevent overlap. The first and last labels always remain visible.
A. Original size: All tick marks and labels are visible.
B. Reduced size: Some tick marks and labels are visible.
C. Further reduced size: Only a few tick marks and labels remain visible.
Tick marks and labels hidden progressively as space decreases
Accessibility
SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.
For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.
Keyboard navigation
The following keyboard combinations are supported by the SAPUI5 Slider component.
Screen reader support
For details on screen reader support and Accessible Rich Internet Applications (ARIA), see the UI5 Screen Reader Support and WAI-ARIA Authoring.
Content
Wrapping and truncation
If the content exceeds the container width, it will be truncated automatically. Define an appropriate label width to maintain clarity and avoid unnecessary truncation.
Slider with truncating labels
Localization
The slider supports both left-to-right and right-to-left layouts. In right-to-left mode, the track direction and handle movement mirror the reading flow.
Slider in left-to-right mode
Slider in right-to-left mode
Framework Comparison
Some behaviors differ between frameworks due to implementation specifics. The table below summarizes the differences between SAPUI5 and SAP Web Components and lists the framework-specific patterns.
[internal_only]To request this feature for SAP Web Components, submit an InnerSource request.[/internal_only]