Updated: July 17, 2024


ui5-slider | v1.0


A slider enables the user to adjust a single value within a specified numerical range.

Slider – live example

When to Use


Use the slider:

  • If you want to provide graphical support for changing a value.

Don’t use the slider:

  • For decorative purposes.


1. Start point: Minimum value of the slider range.

2. Track (active or inactive)

3. Slider handle: Grip for setting the value.

4. Tooltip (optional): Displays a tooltip 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
Anatomy of a slider


The following slider variants are available:

Basic slider
Disabled slider
Slider with tooltip
Slider with tooltip, tick marks, and labels

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.
Slider with tooltip, 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.

Related Links



  • Slider
    (UI5 Web Components documentation)