Skip to main content

Slider

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.

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.js";

Basic Sample​

Properties​

value​

DescriptionCurrent value of the slider
Typenumber
Default0

min​

DescriptionDefines the minimum value of the slider.
Typenumber
Default0

max​

DescriptionDefines the maximum value of the slider.
Typenumber
Default100

step​

DescriptionDefines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).
Note: If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
Typenumber
Default1

labelInterval​

DescriptionDisplays a label with a value on every N-th step.
Note: The step and tickmarks properties must be enabled. Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second tickmark will be labelled, which means every 4th value number.
Typenumber
Default0

showTickmarks​

DescriptionEnables tickmarks visualization for each step.
Note: The step must be a positive number.
Typeboolean
Defaultfalse

showTooltip​

DescriptionEnables handle tooltip displaying the current value.
Typeboolean
Defaultfalse

disabled​

DescriptionDefines whether the slider is in disabled state.
Typeboolean
Defaultfalse

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring
Default""
Since1.4.0

Slots​

No slots available for this component.

Events​

change​

DescriptionFired when the value changes and the user has finished interacting with the slider.
TypeCustomEvent

input​

DescriptionFired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

NameDescription
progress-containerUsed to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the ui5-slider.
progress-barUsed to style the progress bar, which shows the progress of the ui5-slider.
handleUsed to style the handle of the ui5-slider.

More Samples​

Show Tickmarks​

Tickmarks, marking the step can be displayed on the slider. In addition, labels with the given step can be displayed.

Show Tooltip​

Tooltip with the current value can be displayed upon handle hover.