UI Elements User Input Range Slider

Updated: May 24, 2017
SAPUI5 Version 1.44

Range Slider

sap.m.RangeSlider

Intro

A range slider is a user interface control that enables the user to select a value range in a predefined numerical interval.

Range slider
Range slider

Usage

Use the range slider if you want to select a value range in a predefined numerical interval. If you want to specify only a single value in a predefined numerical interval, use the slider instead.

Responsiveness

The range slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control. The range slider supports the cozy and compact form factors.

Types

Only a horizontal range slider is available.

Components

The range slider consists of:

  • Progress line
  • Minimum and maximum value
  • Grips
  • Tooltips or input fields
Range slider components
Range slider components

Behavior and Interaction

Changing Values

If the range slider is editable, the hand cursor appears when hovering over the range slider with the mouse. A tooltip also appears when hovering, displaying the current values of each grip. The grips move together with the corresponding tooltips.

The value range of the slider can be changed when the grips are adjusted via drag and drop. The grips can be moved with or without increments based on the predefined steps. The value range can be changed by clicking or tapping the bar outside of it. The corresponding grip then moves to this new position.

Range Slider - hovered
Range Slider - hovered

Range Slider With Input Fields

The range slider can be used with input fields instead of tooltips.

Range slider with input fields
Range slider with input fields

Moving the Entire Range

The value range can be changed when the progress line is adjusted via drag and drop.

Range slider - Moving the entire range
Range slider - Moving the entire range

Equal Values

The grips of the range slider can be positioned on the same value.

Range slider - equal values
Range slider - equal values

Overlapping

The grips of the range slider can be moved across each other. The minimum can become the maximum and vice versa.

Tick marks

You can apply tick marks to the range slider. The tick marks are related to the step property. For example, if you have a range from 1 to 100 and step 10, the range slider will have 11 tick marks. The tick marks are responsive. If the distance between 2 tick marks is less than 8px, all tick marks except for the first and last will disappear.

Range slider - with tick marks
Range slider - with tick marks

Properties

  • The step property must be positive. If a negative number is provided, the default value 1 is used instead.
  • The minimum, maximum, and value properties can be decimals (float values). The slider automatically sets the minimum value to 0 and the maximum value to 100 by default.
  • The width of the control can be provided in percentage (%), em, px, and all possible CSS units. The slider automatically sets the width of the slider to 100% by default.
  • The range property determines the range in which the user can select values. If the value is lower/higher than the allowed minimum/maximum, a warning message will be sent to the console.
  • The inputsAsTooltips property indicates whether input fields should be used as tooltips for the grips.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation