Slider

v1.0.0-rc.11
@ui5/webcomponents
<ui5-slider>

Basic Slider

<ui5-slider></ui5-slider>
	

Slider with Tooltip

<ui5-slider min="0" max="20" show-tooltip></ui5-slider>
	

Disabled Slider with Tickmarks and Labels

<ui5-slider min="20" max="100" label-interval="5" disabled show-tickmarks></ui5-slider>
	

Slider Tooltip, Tickmarks and Labels

<ui5-slider min="-20" max="20" step="2" value="12" show-tooltip label-interval="2" show-tickmarks></ui5-slider>
	

Overview

The Slider component represents a numerical range and a handle (grip). The purpose of the component is to enable visual selection of a value in a continuous numerical range by moving an adjustable handle.

Structure

The most important properties of the Slider are:
  • min - The minimum value of the slider range.
  • max - The maximum value of the slider range.
  • value - The current value of the slider range.
  • step - Determines the increments in which the slider will move.
  • showTooltip - Determines if a tooltip should be displayed above the handle.
  • showTickmarks - Displays a visual divider between the step values.
  • labelInterval - Labels some or all of the tickmarks with their values.

Usage

The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).

Responsive Behavior

The ui5-slider component adjusts to the size of its parent container by recalculating and resizing the width of the control. You can move the slider handle in several different ways:
  • Drag and drop the handle to the desired value.
  • Click/tap on the range bar to move the handle to that location.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-slider exposes the following CSS Shadow Parts:
  • progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the ui5-slider.
  • progress-bar - Used to style the progress bar, which shows the progress of the ui5-slider.
  • handle - Used to style the handle of the ui5-slider.

Keyboard Handling

  • Left or Down Arrow - Moves the handle one step to the left, effectively decreasing the component's value by step amount;
  • Right or Up Arrow - Moves the handle one step to the right, effectively increasing the component's value by step amount;
  • Left or Down Arrow + Ctrl/Cmd - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;
  • Right or Up Arrow + Ctrl/Cmd - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;
  • Plus - Same as Right or Up Arrow;
  • Minus - Same as Left or Down Arrow;
  • Home - Moves the handle to the beginning of the range;
  • End - Moves the handle to the end of the range;
  • Page Up - Same as Right or Up + Ctrl/Cmd;
  • Page Down - Same as Left or Down + Ctrl/Cmd;
  • Escape - Resets the value property after interaction, to the position prior the component's focusing;

ES6 Module Import

import "@ui5/webcomponents/dist/Slider";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
value
sap.ui.webcomponents.base.types.Float
0
Current value of the slider
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel