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​

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.4.0

disabled​

DescriptionDefines whether the slider is in disabled state.
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

endValue​

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

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.
Note: This property is ignored when the tickmarks property is used. In that case every custom tickmark is labelled with its own label.
Typenumber
Default0

max​

DescriptionDefines the maximum value of the slider.
Typenumber
Default100

min​

DescriptionDefines the minimum value of the slider.
Typenumber
Default0

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

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

startValue​

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

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

tickmarks​

DescriptionDefines custom tickmarks with labels on the slider scale. Each tickmark object has a numeric value and an optional label string. Tickmarks are purely visual — they display labeled markers at specific positions but do not affect the slider's movement behavior. The slider still moves according to min, max, and step.
When the current value matches a tickmark value, the tickmark's label is shown in the tooltip and announced via aria-valuetext.
Note: When tickmarks is provided, the scale is automatically shown (equivalent to showTickmarks), and labelInterval is ignored - every custom tickmark is rendered with its own label.
TypeArray<Tickmark>
Default[]
Since2.23.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​

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

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

CSS Custom States​

No CSS custom states available for this component.

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.