RangeSlider
Represents a numerical interval and two handles (grips) to select a sub-range within it. The purpose of the component to enable visual selection of sub-ranges within a given interval.
Structure​
The most important properties of the Range 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.
- 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.
Notes:​
- The right and left handle can be moved individually and their positions could therefore switch.
- The entire range can be moved along the interval.
Usage​
The most common use case is to select and move sub-ranges on a continuous numerical scale.
Responsive Behavior​
You can move the currently selected range by clicking on it and dragging it along the interval.
Keyboard Handling​
Left or Down Arrow
- Moves a component's handle or the entire selection one step to the left;Right or Up Arrow
- Moves a component's handle or the entire selection one step to the right;Left or Down Arrow + Ctrl/Cmd
- Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;Right or Up Arrow + Ctrl/Cmd
- Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;Plus
- Same asRight or Up Arrow
;Minus
- Same asLeft or Down Arrow
;Home
- Moves the entire selection or the selected handle to the beginning of the component's range;End
- Moves the entire selection or the selected handle to the end of the component's range;Page Up
- Same asRight or Up Arrow + Ctrl/Cmd
;Page Down
- Same asLeft or Down Arrow + Ctrl/Cmd
;Escape
- Resets thestartValue
andendValue
properties to the values prior the component focusing;
ES6 Module Import​
import "@ui5/webcomponents/dist/RangeSlider.js";
Basic Sample​
Properties​
startValue​
endValue​
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 Range Slider. In addition, labels with the given step can be displayed.
Show Tooltips​
Tooltip with the current value can be displayed upon handles hover.