Range Slider

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

Basic Range Slider

<ui5-range-slider end-value="20"></ui5-range-slider>
	

Range Slider with Custom 'min', 'max', 'startValue' and 'endValue' Properties

<ui5-range-slider  min="100" max="200" start-value="120" end-value="150"></ui5-range-slider>
	

Range Slider with Tooltips

<ui5-range-slider start-value="3" end-value="13" show-tooltip></ui5-range-slider>
	

Range Slider with Tickmarks and Custom Step

<ui5-range-slider step="2" start-value="4" end-value="12" show-tickmarks></ui5-range-slider>
	

Range Slider with Tooltips, Tickmarks and Labels

<ui5-range-slider min="0" max="112" step="2" start-value="4" end-value="12" show-tooltip label-interval="2" show-tickmarks></ui5-range-slider>
	

Overview

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

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
endValue
end-value
sap.ui.webcomponents.base.types.Float
100
Defines end point of a selection - position of a second handle on the slider.

startValue
start-value
sap.ui.webcomponents.base.types.Float
0
Defines start point of a selection - position of a first handle on 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