Intro

This guideline now covers both SAPUI5 and SAP Web Components. Learn more.

Information

Icon

false

Intro

A range slider is a UI component that lets users select a value range within a predefined numeric or non-numeric interval.

Range slider with two handles on a track, blue active segment between them.

Range slider

Component availability

The component is available in the following libraries:

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.RangeSlider%2F">sap.m.RangeSlider</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FRangeSlider%2F">ui5-range-slider</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D19-2025">Range Slider</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.RangeSlider">sap.m.RangeSlider</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FRangeSlider%2F">ui5-range-slider</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Fiori for Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1494295794601744471">Range Slider</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

When to Use

false

Use the range slider to:

Let users select a minimum and maximum value within a predefined numeric or non-numeric interval.
Display and adjust settings such as volume, brightness, saturation, or contrast.

dont

false

Don’t use the range slider to:

Select a single value within a predefined range. Use the slider instead.

Choose an appropriate size for the range slider that matches the use case.
Use stepped increments to allow users to select from predefined intervals.
Ensure values are clearly labeled to provide context and enhance usability.
Display the current value as the user interacts with the slider.

Anatomy

Start point: Minimum value of the slider range.
Track (active or inactive): Shows the full slider range. The active track represents the selected portion of the range, while the inactive track shows the unselected areas outside of it.
Value indicators (optional): Display the current values and can switch to input fields for direct editing.
Tick marks (optional): Represent the value intervals (steps). Each tick mark corresponds to a selectable value.
End point: Maximum value of the slider range.
Labels (optional): Display the values of selected tick marks along the slider.
Slider handle (left and right): Represent the current minimum and maximum values. Each handle moves independently, and their positions may swap as the selected range changes.

Anatomy of a range slider with numbered pointers referencing its different elements - start point, track, value indicators, tick marks, end point, labels, and slider handles that can be dragged left and right to adjust the range.

Anatomy of a range slider

Types

The following range slider variants are available:

Basic range slider

A simple range slider with handles and no extra elements, such as value indicators or tick marks and labels. Lets users select a range of values between a defined minimum and maximum. The two handles can be dragged independently to adjust the start and end values of the range.

Use when a clean, minimal interface is needed, or when additional visual guidance is unnecessary.

Basic range slider with a track with start and end points, two handles and an active segment between them.

Basic range slider

Range slider with value indicators

The value indicators appear above the handles to show or edit the current value. Users can edit the values directly when editable indicators are enabled.

A. Value indicators: Display the current values above the handles.

B. Editable value indicators: Display the current values above the handles as input fields that users can edit directly.

Range slider with value indicators above the left and right handles in display A) and edit B) modes, showing current values.

Range slider with value Indicators in display and edit mode

Range slider with tick marks and labels

Tick marks appear along the track to represent predefined value steps and help users align their selections to consistent intervals. Labels can be added to certain tick marks to display their corresponding values.

Use this variant when the range includes predefined or incremental steps.

Range slider with tick marks and numeric labels at 0, 25, 50, 75, and 100. Two handles define an active range between 25 and 75.

Range slider with tick marks and labels

Custom scale and custom value indicators :badge, info, large, _, SAPUI5 only:

The range slider supports custom scales with descriptive labels instead of numeric values. Keep labels concise and reduce the number of tick marks if longer labels would create clutter.

Range slider with custom value indicators and custom scale using descriptive labels instead of numbers, for example Quarter 1, Quarter 2, Quarter 3.

Range slider with custom scale and custom value indicators

hint

To use custom scales in a range slider, you must map them to the floats for the range slider scale.

States

Component states

The range slider supports two component states: enabled and disabled.

A. Enabled: The range slider is interactive and the user can adjust the value.

B. Disabled: The range slider is non-interactive and cannot be adjusted.

For more information, see Component States.

Range slider shown in enabled and disabled states. The enabled slider appears active and interactive, while the disabled slider is grayed out.

Range slider component states

Interaction states

The range slider has the following interaction states: regular, hover (on the handles and on the active track), and down.

A. Regular: The default state of the component.

B. Hover on the handle: When the cursor is over a handle, the handle highlights to indicate it can be adjusted.

C. Hover on the active track: When the cursor is on the active track, both handles highlight to indicate that the entire range is interactive.

D. Down: The state shown while a handle is pressed or being dragged.

For more information, see Interaction States.

Range slider shown in different interaction states: regular; hover on the handle, with a highlighted handle; hover on the active track, with both handles highlighted; and down, with both handles shown with a border.

Range slider interaction states

Focus state

The range slider supports separate focus states for the handles and the active track.

A. On the handle: When a handle is focused, it displays a visible border with a transparent fill, so the current value remains visible beneath it.

B. On the active track: When the active track is focused, a border appears around both handles and the active track, indicating that the entire range can be adjusted.

For more information, see Focus State.

Range slider focus states: on handle with visible border, on active track with border around both handles and track.

Range slider focus state

Behavior and Interaction

Dragging a handle to adjust values

Users can drag a handle to adjust the selected values. As the handle is moved, value indicators provide real-time feedback by displaying the current value. The behavior progresses as follows:

A. Default state: The range slider is in its default state. Handles are placed either at the default range values (such as 0 and 100) or at positions defined by your application.

B. Clicking the handle: When a user clicks on one of the handles, it becomes transparent, ensuring 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 value indicators are enabled, they remain visible throughout the interaction and update continuously as the user moves the handle.

Once the user releases the handle, the final value is applied to the component according to the application logic.

Three-step sequence demonstrating dragging a handle: default state, clicking handle, dragging a handle to adjust value with real-time feedback.

Dragging a handle to adjust the selected values

Clicking on the track to adjust values

Users can also adjust a value by interacting directly with the track itself. Clicking the inactive track moves the nearest handle to the clicked position.

A. Start of interaction: The range slider is in its default state with either predefined values or values that were previously modified.

B. End of interaction: The moment the user clicks on an inactive part of the slider track, the component identifies which handle is nearest to the clicked point and moves that handle directly to the clicked position.

The clicked point becomes the new value for that handle, updating the selected range according to the application logic.

Two-step sequence showing clicking on the inactive part of the track to move the closer handle to the clicked position.

Clicking or tapping the track moves the closer handle to that point

Snapping

The snapping mechanism in a range slider is based on preconfigured step intervals. When a user drags a handle or clicks on the track, the handle automatically snaps to the nearest valid value based on these intervals. This feature helps users make accurate adjustments with ease and confidence, minimizing the likelihood of errors.

A. Start of interaction: The user drags the handle to a new position.

B. End of interaction: When released, the handle automatically snaps to the nearest tick mark, and the value indicator updates accordingly.

Two-step sequence demonstrating snapping: dragging a handle and releasing it to snap to the nearest tick mark with its value indicator updating accordingly.

Snapping to tick marks by handle dragging

Range movement

Users can move the entire selected range at once. When a range slider has a selected range, a user can move the entire selection at once rather than adjusting each handle individually.

A. Start of interaction: Hovering over the active track highlights both handles, indicating that the full range can be moved.

B. End of interaction: From that point, the user can click and drag this highlighted section, moving the entire range (both handles simultaneously) to a new position, all while preserving the width of the selected range.

Two-step sequence showing moving entire range: hover on active track highlights both handles, dragging moves full range while preserving width.

Moving the entire range

Editable value indicators

If the value indicators are configured to be editable, they transform into input fields when activated, so users can directly type the desired values instead of dragging the handles.

A. Start of interaction: The user clicks on the input field and type the new value.

B. End of interaction: The user confirms the newly entered input value by pressing Enter. The handle automatically moves to the new position and shows the corresponding value.

Two-step sequence demonstrating editable value indicators: click to transform to input field, enter new value and hit Enter to confirm and move the handle to its new position.

Editing the value using the value indicators

Responsiveness

By default, the range slider takes the width of its parent container. It supports both cozy and compact form factors.

Tick marks and labels

When space is limited, tick marks and labels start hiding 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: A few tick marks and labels are visible.

Range slider shown in original, reduced, and further reduced sizes, with all, some, and few tick marks and labels visible. Tick marks and labels progressively hide as available space decreases, while the first and last labels remain visible.

Responsiveness of tick marks and labels

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.

The following keyboard combinations are supported by the SAPUI5 Range Slider component.

<div> <div>Key Combination</div> <div>What It Does</div> </div> <div> <div><strong>Tab</strong></div> <div>Moves the focus as follows: entire range slider, left handle, right handle.</div> </div> <div> <div><strong>Shift + Tab</strong></div> <div>Backward navigation.</div> </div> <div> <div><strong>Up Arrow or Right Arrow or +</strong></div> <div>If the focus is on a handle, its value is increased by one unit.</div> </div> <div> <div><strong>Down Arrow or Left Arrow or -</strong></div> <div>If the focus is on a handle, its value is decreased by one unit.</div> </div> <div> <div><strong>Ctrl + Up Arrow or Ctrl + Right Arrow or Page Up</strong></div> <div>If the focus is on a handle, its value is increased by one larger step (for example, up to the next tick mark).</div> </div> <div> <div><strong>Ctrl + Down Arrow or Ctrl + Down Arrow or Page Down</strong></div> <div>If the focus is on a handle, its value is decreased by one larger step (for example, up to the next tick mark).</div> </div> <div> <div> <p><strong>Home</strong></p> <p><strong>End</strong></p> </div> <div>If the focus is on a handle, the focus is moved to its current minimum or maximum position.</div> </div> <div> <div><strong>Esc</strong></div> <div>If the focus is on a handle, this handle is reverted to the value it had when it got the focus.</div> </div> <div> <div><strong>F2</strong></div> <div>If the focus is on a handle and text input is allowed for the input field, the focus goes to the input field and you can type directly. Pressing <strong>Enter</strong> triggers the update and F2 moves the focus back to the handle.</div> </div>

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 available width, it is truncated automatically. Define an appropriate label width to maintain clarity and avoid unnecessary truncation.

Range slider with truncated tick mark labels when content exceeds the available width. The first and last labels remain fully visible, while intermediate labels are shortened with ellipses.

Range slider with truncating labels

Localization

The range 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.

Range slider in left-to-right (LTR) layout with values increasing from left to right.

Range slider in left-to-right mode

Range slider in right-to-left (RTL) layout with values increasing from right to left.

Range 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.

<div> <div>Feature</div> <div>SAPUI5</div> <div>SAP Web Components</div> </div> <div> <div>The range slider supports custom scales and value indicators, enabling the use of descriptive labels in place of numeric values. For more information, see <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Frange-slider%2Fusage%23custom-scale-and-custom-value-indicators">Custom scale and custom value indicators</a>.</div> <div>Available</div> <div>Not available</div> </div>

[internal_only]To request this feature for SAP Web Components, submit an InnerSource request.[/internal_only]