RangeSlider

<ui5-range-slider> | Since 1.0.0-rc.11

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 as Right or Up Arrow;
• Minus - Same as Left 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 as Right or Up Arrow + Ctrl/Cmd;
• Page Down - Same as Left or Down Arrow + Ctrl/Cmd;
• Escape - Resets the startValue and endValue properties to the values prior the component focusing;

ES6 Module Import

import "@ui5/webcomponents/dist/RangeSlider.js";

Basic Sample

Properties

startValue

Description	Defines start point of a selection - position of a first handle on the slider.
Type	number
Default	0

endValue

Description	Defines end point of a selection - position of a second handle on the slider.
Type	number
Default	100

min

Description	Defines the minimum value of the slider.
Type	number
Default	0

max

Description	Defines the maximum value of the slider.
Type	number
Default	100

name

Description	Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Type	string | undefined
Default	undefined
Since	2.0.0

step

Description	Defines 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.
Type	number
Default	1

labelInterval

Description	Displays 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.
Type	number
Default	0

showTickmarks

Description	Enables tickmarks visualization for each step. Note: The step must be a positive number.
Type	boolean
Default	false

showTooltip

Description	Enables handle tooltip displaying the current value.
Type	boolean
Default	false

editableTooltip

Description	Indicates whether input fields should be used as tooltips for the handles. Note: Setting this option to true will only work if showTooltip is set to true. Note: In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.
Type	boolean
Default	false

disabled

Description	Defines whether the slider is in disabled state.
Type	boolean
Default	false

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.4.0

Slots

No slots available for this component.

Events

change

Description	Fired when the value changes and the user has finished interacting with the slider.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

input

Description	Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

Name	Description
progress-container	Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the ui5-range-slider.
progress-bar	Used to style the progress bar, which shows the progress of the ui5-range-slider.
handle	Used to style the handles of the ui5-range-slider.

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.