Skip to main content

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​

DescriptionDefines start point of a selection - position of a first handle on the slider.
Typenumber
Default0

endValue​

DescriptionDefines end point of a selection - position of a second handle on the slider.
Typenumber
Default100

min​

DescriptionDefines the minimum value of the slider.
Typenumber
Default0

max​

DescriptionDefines the maximum value of the slider.
Typenumber
Default100

name​

DescriptionDetermines 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.
Typestring | undefined
Defaultundefined
Since2.0.0

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

editableTooltip​

DescriptionIndicates 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.
Typeboolean
Defaultfalse

disabled​

DescriptionDefines whether the slider is in disabled state.
Typeboolean
Defaultfalse

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
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
BubblesYes
CancelableNo

input​

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

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-range-slider.
progress-barUsed to style the progress bar, which shows the progress of the ui5-range-slider.
handleUsed 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.