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 bystep
amount;Right or Up Arrow
- Moves the handle one step to the right, effectively increasing the component's value bystep
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 asRight or Up Arrow
;Minus
- Same asLeft 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 asRight or Up + Ctrl/Cmd
;Page Down
- Same asLeft 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​
min​
max​
step​
labelInterval​
showTickmarks​
showTooltip​
disabled​
accessibleName​
Slots​
No slots available for this component.
Events​
change​
input​
Methods​
No methods available for this component.
CSS Parts​
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.