Updated: December 19, 2016




A slider is a control that enables the user to adjust values in a specified numerical range.

Slider in an input list item
Slider in an input list item


Use the slider to change values with graphical support.


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 a mouse and keyboard operated device.


Only a horizontal slider is available.

Behavior and Interaction

Changing the Value

  • If the slider is editable, the hand cursor appears when the grip is hovered.
  • The slider can be changed when the grip is adjusted via drag and drop.
  • The grip can be moved with or without increments based on the predefined steps.
  • The slider can be changed by clicking or tapping the bar. The grip then moves to this new position.


The slider can be shown with or without a progress bar. By default, the progress bar is shown.


Slider without progress bar
Slider without progress bar
Slider with progress bar
Slider with progress bar


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


Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

  • No links