class sap.m.Slider

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

Overview

A sap.m.Slider control represents a numerical range and a handle. The purpose of the control is to enable visual selection of a value in a continuous numerical range by moving an adjustable handle.

Notes:

Structure

The most important properties of the Slider are:

These properties determine the visualization of the tooltips:

Usage

The most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).

Responsive Behavior

The sap.m.Slider control adjusts to the size of its parent container by recalculating and resizing the width of the control. You can move the slider handle in several different ways:


Constructor

Constructor for a new Slider.

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.Slider(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
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

Aggregations

Default Aggregation: scale

Name Cardinality Type Description
_defaultScale 0..1 sap.m.ResponsiveScale

Default scale for visualisation of tickmarks, if scale aggregation is not provided

Since: 1.56.

_defaultTooltips 0..n sap.m.SliderTooltipBase

Multiple Aggregation for Tooltips

Since: 1.56.

_handlesLabels 0..n sap.ui.core.InvisibleText

Invisible text for handles and progress announcement

Since: 1.54.

_tooltipContainer 0..1 sap.ui.core.Control

A Container popup that renders SliderTooltips The actual type should be sap.m.SliderTooltipContainer

Since: 1.54.

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 (default) 0..1 sap.m.IScale

Scale for visualisation of tickmarks and labels

Since: 1.46.


Associations

Name Cardinality Type Description
ariaLabelledBy 0..n sap.ui.core.Control

Association to controls / IDs which label this control (see WAI-ARIA attribute aria-labelledby).

Since: 1.27.0.


Events Overview

Event Description
change

This event is triggered after the end user finishes interacting, if there is any change.

liveChange

This event is triggered during the dragging period, each time the slider value changes.

change

This event is triggered after the end user finishes interacting, if there is any change.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
value float

The current value of the slider after a change.

liveChange

This event is triggered during the dragging period, each time the slider value changes.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
value float

The current value of the slider after a live change.


Methods Overview

Method Description
addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

addCustomTooltip

Adds some customTooltip to the aggregation customTooltips.

assignDefaultTooltips

Creates default tooltips, if needed, and forwards properties to them

associateCustomTooltips

Creates custom tooltips, if needed, and forwards properties to them

attachChange

Attaches event handler fnFunction to the change event of this sap.m.Slider.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Slider itself.

This event is triggered after the end user finishes interacting, if there is any change.

attachLiveChange

Attaches event handler fnFunction to the liveChange event of this sap.m.Slider.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Slider itself.

This event is triggered during the dragging period, each time the slider value changes.

destroyCustomTooltips

Destroys all the customTooltips in the aggregation customTooltips.

destroyScale

Destroys the scale in the aggregation scale.

detachChange

Detaches event handler fnFunction from the change event of this sap.m.Slider.

The passed function and listener object must match the ones used for event registration.

detachLiveChange

Detaches event handler fnFunction from the liveChange event of this sap.m.Slider.

The passed function and listener object must match the ones used for event registration.

sap.m.Slider.extend

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

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

fireChange

Fires event change to attached listeners.

fireLiveChange

Fires event liveChange to attached listeners.

forwardProperties

Forwards properties to a given control

forwardPropertiesToDefaultTooltips

Forwards properties to default tooltips

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getCustomTooltips

Gets content of aggregation customTooltips.

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

getEnabled

Gets current value of property enabled.

Indicates whether the user can change the value.

Default value is true.

getEnableTickmarks

Gets current value of property enableTickmarks.

Enables tickmarks visualisation

Default value is false.

getInputsAsTooltips

Gets current value of property inputsAsTooltips.

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.

Default value is false.

getMax

Gets current value of property max.

The maximum value.

Default value is 100.

sap.m.Slider.getMetadata

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

getMin

Gets current value of property min.

The minimum value.

Default value is 0.

getName

Gets current value of property name.

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

Default value is empty string.

getProgress

Gets current value of property progress.

Indicate whether a progress bar indicator is shown.

Default value is true.

getScale

Gets content of aggregation scale.

Scale for visualisation of tickmarks and labels

getShowAdvancedTooltip

Gets current value of property showAdvancedTooltip.

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.

Default value is false.

getShowHandleTooltip

Gets current value of property showHandleTooltip.

Indicate whether the handle tooltip is shown.

Default value is true.

getStep

Gets current value of property step.

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.

Default value is 1.

getUsedTooltips

Gets the tooltips that should be shown. Returns custom tooltips if provided. Otherwise - default tooltips

getValue

Gets current value of property value.

Define the value.

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

Default value is 0.

getWidth

Gets current value of property width.

Defines the width of the control.

Default value is "100%".

handleTooltipChange

Handles change of Tooltip's inputs.

indexOfCustomTooltip

Checks for the provided sap.m.SliderTooltipBase in the aggregation customTooltips. and returns its index if found or -1 otherwise.

initAndSyncTooltips

Assigns tooltips and forwards properties to them

initDefaultTooltip

Creates a default SliderTooltip instance and adds it as an aggregation

initTooltipContainer

Creates a SliderTooltipContainer

insertCustomTooltip

Inserts a customTooltip into the aggregation customTooltips.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAllCustomTooltips

Removes all the controls from the aggregation customTooltips.

Additionally, it unregisters them from the hosting UIArea.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

removeCustomTooltip

Removes a customTooltip from the aggregation customTooltips.

setEnabled

Sets a new value for property enabled.

Indicates whether the user can change the value.

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

Default value is true.

setEnableTickmarks

Sets a new value for property enableTickmarks.

Enables tickmarks visualisation

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

Default value is false.

setInputsAsTooltips

Sets a new value for property inputsAsTooltips.

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.

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

Default value is false.

setMax

Sets a new value for property max.

The maximum value.

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

Default value is 100.

setMin

Sets a new value for property min.

The minimum value.

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

Default value is 0.

setName

Sets a new value for property name.

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

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

Default value is empty string.

setProgress

Sets a new value for property progress.

Indicate whether a progress bar indicator is shown.

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

Default value is true.

setScale

Sets the aggregated scale.

setShowAdvancedTooltip

Sets a new value for property showAdvancedTooltip.

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.

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

Default value is false.

setShowHandleTooltip

Sets a new value for property showHandleTooltip.

Indicate whether the handle tooltip is shown.

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

Default value is true.

setStep

Sets a new value for property step.

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.

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

Default value is 1.

setValue

Sets the property value.

Default value is 0.

setWidth

Sets a new value for property width.

Defines the width of the control.

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

Default value is "100%".

stepDown

Decrements the value by multiplying the step the step with the given parameter.

stepUp

Increments the value by multiplying the step with the given parameter.

updateAdvancedTooltipDom

Updates value of the advanced tooltip.

updateTooltipsPositionAndState

Updates values of Slider and repositions tooltips.

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to add; if empty, nothing is inserted

addCustomTooltip

Adds some customTooltip to the aggregation customTooltips.

Param Type DefaultValue Description
oCustomTooltip sap.m.SliderTooltipBase

The customTooltip to add; if empty, nothing is inserted

assignDefaultTooltips

Creates default tooltips, if needed, and forwards properties to them

Param Type DefaultValue Description
aTooltipIds Array

Array of strings for ID generation

associateCustomTooltips

Creates custom tooltips, if needed, and forwards properties to them

Param Type DefaultValue Description
iTooltipCount number

Count of the tooltips

attachChange

Attaches event handler fnFunction to the change event of this sap.m.Slider.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Slider itself.

This event is triggered after the end user finishes interacting, if there is any change.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Slider itself

attachLiveChange

Attaches event handler fnFunction to the liveChange event of this sap.m.Slider.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Slider itself.

This event is triggered during the dragging period, each time the slider value changes.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Slider itself

destroyCustomTooltips

Destroys all the customTooltips in the aggregation customTooltips.

destroyScale

Destroys the scale in the aggregation scale.

detachChange

Detaches event handler fnFunction from the change event of this sap.m.Slider.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachLiveChange

Detaches event handler fnFunction from the liveChange event of this sap.m.Slider.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.m.Slider.extend

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

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.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

fireChange

Fires event change to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

value float

The current value of the slider after a change.

fireLiveChange

Fires event liveChange to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

value float

The current value of the slider after a live change.

forwardProperties

Forwards properties to a given control

Param Type DefaultValue Description
aProperties Array

Array of properties to forward

oControl sap.ui.core.Element

Control to which should be forward

forwardPropertiesToDefaultTooltips

Forwards properties to default tooltips

Param Type DefaultValue Description
iTooltipCount number

Count of the tooltips

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getCustomTooltips

Gets content of aggregation customTooltips.

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

getEnabled

Gets current value of property enabled.

Indicates whether the user can change the value.

Default value is true.

getEnableTickmarks

Gets current value of property enableTickmarks.

Enables tickmarks visualisation

Default value is false.

getInputsAsTooltips

Gets current value of property inputsAsTooltips.

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.

Default value is false.

getMax

Gets current value of property max.

The maximum value.

Default value is 100.

sap.m.Slider.getMetadata

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

getMin

Gets current value of property min.

The minimum value.

Default value is 0.

getName

Gets current value of property name.

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

Default value is empty string.

getProgress

Gets current value of property progress.

Indicate whether a progress bar indicator is shown.

Default value is true.

getScale

Gets content of aggregation scale.

Scale for visualisation of tickmarks and labels

getShowAdvancedTooltip

Gets current value of property showAdvancedTooltip.

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.

Default value is false.

getShowHandleTooltip

Gets current value of property showHandleTooltip.

Indicate whether the handle tooltip is shown.

Default value is true.

getStep

Gets current value of property step.

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.

Default value is 1.

getUsedTooltips

Gets the tooltips that should be shown. Returns custom tooltips if provided. Otherwise - default tooltips

getValue

Gets current value of property value.

Define the value.

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

Default value is 0.

getWidth

Gets current value of property width.

Defines the width of the control.

Default value is "100%".

handleTooltipChange

Handles change of Tooltip's inputs.

Param Type DefaultValue Description
oEvent jQuery.Event

indexOfCustomTooltip

Checks for the provided sap.m.SliderTooltipBase in the aggregation customTooltips. and returns its index if found or -1 otherwise.

Param Type DefaultValue Description
oCustomTooltip sap.m.SliderTooltipBase

The customTooltip whose index is looked for

initAndSyncTooltips

Assigns tooltips and forwards properties to them

Param Type DefaultValue Description
aTooltipIds Array

Array of strings for ID generation

initDefaultTooltip

Creates a default SliderTooltip instance and adds it as an aggregation

Param Type DefaultValue Description
sId string

The tooltip ID

initTooltipContainer

Creates a SliderTooltipContainer

insertCustomTooltip

Inserts a customTooltip into the aggregation customTooltips.

Param Type DefaultValue Description
oCustomTooltip sap.m.SliderTooltipBase

The customTooltip to insert; if empty, nothing is inserted

iIndex int

The 0-based index the customTooltip should be inserted at; for a negative value of iIndex, the customTooltip is inserted at position 0; for a value greater than the current size of the aggregation, the customTooltip is inserted at the last position

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAllCustomTooltips

Removes all the controls from the aggregation customTooltips.

Additionally, it unregisters them from the hosting UIArea.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy int sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to be removed or its index or ID

removeCustomTooltip

Removes a customTooltip from the aggregation customTooltips.

Param Type DefaultValue Description
vCustomTooltip int string sap.m.SliderTooltipBase

The customTooltip to remove or its index or id

setEnabled

Sets a new value for property enabled.

Indicates whether the user can change the value.

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

Default value is true.

Param Type DefaultValue Description
bEnabled boolean true

New value for property enabled

setEnableTickmarks

Sets a new value for property enableTickmarks.

Enables tickmarks visualisation

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

Default value is false.

Param Type DefaultValue Description
bEnableTickmarks boolean false

New value for property enableTickmarks

setInputsAsTooltips

Sets a new value for property inputsAsTooltips.

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.

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

Default value is false.

Param Type DefaultValue Description
bInputsAsTooltips boolean false

New value for property inputsAsTooltips

setMax

Sets a new value for property max.

The maximum 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
fMax float 100

New value for property max

setMin

Sets a new value for property min.

The minimum value.

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

Default value is 0.

Param Type DefaultValue Description
fMin float 0

New value for property min

setName

Sets a new value for property name.

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

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

Default value is empty string.

Param Type DefaultValue Description
sName string ""

New value for property name

setProgress

Sets a new value for property progress.

Indicate whether a progress bar indicator is shown.

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

Default value is true.

Param Type DefaultValue Description
bProgress boolean true

New value for property progress

setScale

Sets the aggregated scale.

Param Type DefaultValue Description
oScale sap.m.IScale

The scale to set

setShowAdvancedTooltip

Sets a new value for property showAdvancedTooltip.

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.

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

Default value is false.

Param Type DefaultValue Description
bShowAdvancedTooltip boolean false

New value for property showAdvancedTooltip

setShowHandleTooltip

Sets a new value for property showHandleTooltip.

Indicate whether the handle tooltip is shown.

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

Default value is true.

Param Type DefaultValue Description
bShowHandleTooltip boolean true

New value for property showHandleTooltip

setStep

Sets a new value for property step.

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.

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

Default value is 1.

Param Type DefaultValue Description
fStep float 1

New value for property step

setValue

Sets the property value.

Default value is 0.

Param Type DefaultValue Description
fNewValue float

new value for property value.

mOptions object

The options object

setWidth

Sets a new value for property width.

Defines the width of the control.

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
sWidth sap.ui.core.CSSSize "100%"

New value for property width

stepDown

Decrements the value by multiplying the step the step with the given parameter.

Param Type DefaultValue Description
iStep int 1

The number of steps the slider goes down.

stepUp

Increments the value by multiplying the step with the given parameter.

Param Type DefaultValue Description
iStep int 1

The number of steps the slider goes up.

updateAdvancedTooltipDom

Updates value of the advanced tooltip.

Param Type DefaultValue Description
sNewValue string

The new value

updateTooltipsPositionAndState

Updates values of Slider and repositions tooltips.

Param Type DefaultValue Description
oTooltip string

Tooltip to be changed

fValue float

New value of the Slider