Intro

A slider lets users select a value from a segmented or stepped range by dragging a handle along a track. It can be used for adjusting settings such as volume, brightness, or price filters.

Slider component

When to Use

Use the slider if:

You want to provide graphical support for changing a value.
You need to adjust values. Sliders are great for settings like volume or screen brightness.
You want people to make quick adjustments without typing.
You want people to see changes, such as audio or video settings, as they move the slider.

Don't

Don’t use the slider if:

There are specific choices, such as selecting a category or an item from a list. Consider using radio buttons or checklists instead.
Accessibility is a concern. Sliders can be tricky for people with physical disabilities. It's important to provide options that are easier to use, such as dropdowns or input fields.
Space is limited. On small screens, sliders can take up too much room. Consider using smaller input options when the screen is crowded.

Anatomy

Anatomy of a slider

Start point: The first value in the slider’s range, marking the minimum selectable value.
Track: Horizontal bar the handle moves along. The active section (blue) shows the selected portion of the range. The inactive section (gray) shows the remaining range.
Value indicator (optional): A text input displayed above the handle, showing the currently selected value.
Tick marks (optional): Small equally spaced marks along the track, indicating available range intervals.
End point: The last value in the slider’s range, marking the maximum selectable value.
Labels (optional): Text or numeric labels displayed along the track to indicate specific or all intervals.
Slider handle: Draggable grip used to select a value.

Types

Only a horizontal slider is available.

Slider types

A. Basic slider: Standard slider with a handle and track for selecting a value within a defined range.

B. Disabled slider: Inactive state slider styled to indicate it cannot be adjusted.

C. Slider with value indicator: An active slider displaying the current value of the range handle in a text input above the handle.

D. Slider with value indicator, tick marks, and labels: An active slider that displays the current value above the range handle, with labeled tick marks at regular intervals.

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

hint

To use custom scales in a slider, you must map them to the floats for the slider scale. [internal_only]For more information, see the SAPUI5 documentation for Sliders.[/internal_only]

Behavior and Interaction

Changing the Value

Interacting with a slider involves intuitive, seamless actions to adjust its values effortlessly. If the slider is editable, the hand cursor appears when the user hovers over the grip. The user can move the slider in two ways:

By using drag and drop to adjust the grip.
By clicking the track. The grip then moves to this new position.

The handle can be moved with or without increments based on the predefined steps.

Adjusting a slider range – dragging the handle, clicking the track, entering a value, or selecting a tick mark.

A. Slider with Text Fields: When dragging the handle, the slider displays the current value in a text field above the handle. It stays visible even when the handle is not being dragged. Alternatively, a tooltip can be shown only while dragging the handle.

B. Slider without Text Fields: Clicking on a specific position on the track moves the handle to that position.

C. Slider with Input Fields: A specific value can be entered manually in the input field to update the slider position accordingly.

D. Slider with Tick Marks and Optional Labels: You can apply tick marks to the slider. Clicking a tick mark moves the handle to that interval. The tick marks are related to the step property, and are responsive. If the distance between 2 tick marks is less than 8 px, all tick marks except for the first and last disappear. Tick mark labels are optional and can be configured per application. The labels are displayed below the tick marks and show the corresponding value of the tick mark. A responsive mechanism hides middle labels when space is limited, keeping the first and last visible.

Slider range can also be adjusted by using the key combination Shift/Cmd + Arrow keys.

Responsiveness

The slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control.

The slider supports the cozy and compact form factors. The compact form factor is used for apps that run on devices operated by a mouse and keyboard.

Properties

The step property must be positive. If a negative number is provided, the default value 1 is used instead.
The minimum, maximum, and value properties can be decimals (float values). The slider automatically sets the minimum value to 0 and maximum value to 100 by default.
The width of the control can be provided in %, em, px, and all possible CSS units. The slider automatically sets the width of the slider to 100% by default.

Localization

The slider supports both left-to-right (LTR) and right-to-left (RTL) languages. In RTL layouts, the track direction and handle movement are reversed so the minimum value starts on the right and increases toward the left.