class sap.m.RangeSlider

Control sample: sap.m.RangeSlider
Visiblity: public
UX Guidelines: Range Slider
Implements:
Available since: N/A
Extends: sap.m.Slider
Module: sap/m/RangeSlider
Application Component: CA-UI5-CTR

Represents a numerical interval and two handles to select a sub-range within it.

Overview

The purpose of the control is to enable visual selection of sub-ranges within a given interval.

Notes:

Usage

The most common usecase 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.


Constructor

Constructor for a new RangeSlider.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.m.RangeSlider(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control


Properties

Name Type Default Value Description
range float[] 0, 100

Determines the currently selected range on the slider.

If the value is lower/higher than the allowed minimum/maximum, a warning message will be output to the console.

Visibility: public
value2 float 100

Current second value of the slider. (Position of the second handle.)

Note: If the value is not in the valid range (between min and max) it will be changed to be in the valid range. If it is smaller than value it will be set to the same value.

Visibility: public

Borrowed Properties

Name Type Default Value Description
enableTickmarks boolean false

Enables tickmarks visualisation

Since: 1.44.

Visibility: public
enabled boolean true

Indicates whether the user can change the value.

Visibility: public
inputsAsTooltips boolean false

Indicates whether input fields should be used as tooltips for the handles. Note: Setting this option to true will only work if showAdvancedTooltip is set to true.

Since: 1.42.

Visibility: public
max float 100

The maximum value.

Visibility: public
min float 0

The minimum value.

Visibility: public
name string empty string

The name property to be used in the HTML code for the slider (e.g. for HTML forms that send data to the server via submit).

Visibility: public
progress boolean true

Indicate whether a progress bar indicator is shown.

Visibility: public
showAdvancedTooltip boolean false

Indicate whether the handle's advanced tooltip is shown. Note: Setting this option to true will ignore the value set in showHandleTooltip. This will cause only the advanced tooltip to be shown.

Since: 1.42.

Visibility: public
showHandleTooltip boolean true

Indicate whether the handle tooltip is shown.

Since: 1.31.

Visibility: public
step float 1

Define the amount of units to change the slider when adjusting by drag and drop.

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).

The step must be positive, if a negative number is provided, the default value will be used instead. If the width of the slider converted to pixels is less than the range (max - min), the value will be rounded to multiples of the step size.

Visibility: public
value float 0

Define the value.

If the value is lower/higher than the allowed minimum/maximum, the value of the properties min/max are used instead.

Visibility: public
width sap.ui.core.CSSSize 100%

Defines the width of the control.

Visibility: public

Borrowed Aggregations

Name Cardinality Type Description
customTooltips 0..n sap.m.SliderTooltipBase

Aggregation for user-defined tooltips. Note: In case of Slider, only the first tooltip of the aggregation is used. In the RangeSlider case - the first two. If no custom tooltips are provided, the default are used

Since: 1.56.

scale 0..1 sap.m.IScale

Scale for visualisation of tickmarks and labels

Since: 1.46.


Methods Overview

Method Description
_getHandleForTooltip

Gets a handle corresponding to a tooltip

sap.m.RangeSlider.extend

Creates a new subclass of class sap.m.RangeSlider with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.m.Slider.extend.

sap.m.RangeSlider.getMetadata

Returns a metadata object for class sap.m.RangeSlider.

getRange

Gets current value of property range.

Determines the currently selected range on the slider.

If the value is lower/higher than the allowed minimum/maximum, a warning message will be output to the console.

Default value is [0, 100].

getValue2

Gets current value of property value2.

Current second value of the slider. (Position of the second handle.)

Note: If the value is not in the valid range (between min and max) it will be changed to be in the valid range. If it is smaller than value it will be set to the same value.

Default value is 100.

setRange

Sets a new value for property range.

Determines the currently selected range on the slider.

If the value is lower/higher than the allowed minimum/maximum, a warning message will be output to the console.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is [0, 100].

setValue2

Sets a new value for property value2.

Current second value of the slider. (Position of the second handle.)

Note: If the value is not in the valid range (between min and max) it will be changed to be in the valid range. If it is smaller than value it will be set to the same value.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 100.

updateAdvancedTooltipDom

Updates values of the advanced tooltips.

updateTooltipsPositionAndState

Updates values of RangeSlider and repositions tooltips.

_getHandleForTooltip

Gets a handle corresponding to a tooltip

Param Type DefaultValue Description
oTooltip sap.m.SliderTooltipBase

Slider/Range slider tooltip

sap.m.RangeSlider.extend

Creates a new subclass of class sap.m.RangeSlider with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.m.Slider.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

sap.m.RangeSlider.getMetadata

Returns a metadata object for class sap.m.RangeSlider.

getRange

Gets current value of property range.

Determines the currently selected range on the slider.

If the value is lower/higher than the allowed minimum/maximum, a warning message will be output to the console.

Default value is [0, 100].

getValue2

Gets current value of property value2.

Current second value of the slider. (Position of the second handle.)

Note: If the value is not in the valid range (between min and max) it will be changed to be in the valid range. If it is smaller than value it will be set to the same value.

Default value is 100.

setRange

Sets a new value for property range.

Determines the currently selected range on the slider.

If the value is lower/higher than the allowed minimum/maximum, a warning message will be output to the console.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is [0, 100].

Param Type DefaultValue Description
sRange float[] [0, 100]

New value for property range

setValue2

Sets a new value for property value2.

Current second value of the slider. (Position of the second handle.)

Note: If the value is not in the valid range (between min and max) it will be changed to be in the valid range. If it is smaller than value it will be set to the same value.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 100.

Param Type DefaultValue Description
fValue2 float 100

New value for property value2

updateAdvancedTooltipDom

Updates values of the advanced tooltips.

Param Type DefaultValue Description
sNewValue string

The new value

updateTooltipsPositionAndState

Updates values of RangeSlider and repositions tooltips.

Param Type DefaultValue Description
oTooltip string

Tooltip to be changed

fValue float

New value of the RangeSlider