Class sap.m.SliderModule: sap/m/Slider

extends Control
implements IFormContent
known direct subclasses: RangeSlider

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:

  • Only horizontal sliders are possible.
  • The handle can be moved in steps of predefined size. This is done with the step property.
  • Setting the property showAdvancedTooltips shows an input field above the handle
  • Setting the property inputsAsTooltips enables the user to enter a specific value in the handle's tooltip.

Structure

The most important properties of the 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
  • progress - Determines if a progress bar will be shown on the slider range
  • step - Determines the increments in which the slider will move

These properties determine the visualization of the tooltips:

  • showAdvancedTooltips - Determines if a tooltip should be displayed above the handle
  • inputsAsTooltips - Determines if the tooltip displayed above the slider's handle should include an input field

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:

  • Drag and drop to the desired value
  • Click/tap on the range bar to move the handle to that location
  • Enter the desired value in the input field (if available)
  • Keyboard (Arrow keys, "+" and "-")
Constructor Summary
new sap.m.Slider(sId?, mSettings?)Constructor for a new Slider.
Event Summary
change(oControlEvent)This event is triggered after the end user finishes interacting, if there is any change.
liveChange(oControlEvent)This event is triggered during the dragging period, each time the slider value changes.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.m.Slider.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.Slider with name sClassName and enriches it with the information contained in oClassInfo.
sap.m.Slider.getMetadata()Returns a metadata object for class sap.m.Slider.
addAriaLabelledBy(vAriaLabelledBy)Adds some ariaLabelledBy into the association ariaLabelledBy.
attachChange(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the change event of this sap.m.Slider.
attachLiveChange(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the liveChange event of this sap.m.Slider.
destroyScale()Destroys the scale in the aggregation scale.
detachChange(fnFunction, oListener)Detaches event handler fnFunction from the change event of this sap.m.Slider.
detachLiveChange(fnFunction, oListener)Detaches event handler fnFunction from the liveChange event of this sap.m.Slider.
fireChange(mParameters?)Fires event change to attached listeners.
fireLiveChange(mParameters?)Fires event liveChange to attached listeners.
getAriaLabelledBy()Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
getEnabled()Gets current value of property enabled.
getEnableTickmarks()Gets current value of property enableTickmarks.
getInputsAsTooltips()Gets current value of property inputsAsTooltips.
getMax()Gets current value of property max.
getMin()Gets current value of property min.
getName()Gets current value of property name.
getProgress()Gets current value of property progress.
getScale()Gets content of aggregation scale.
getShowAdvancedTooltip()Gets current value of property showAdvancedTooltip.
getShowHandleTooltip()Gets current value of property showHandleTooltip.
getStep()Gets current value of property step.
getValue()Gets current value of property value.
getWidth()Gets current value of property width.
removeAllAriaLabelledBy()Removes all the controls in the association named ariaLabelledBy.
removeAriaLabelledBy(vAriaLabelledBy)Removes an ariaLabelledBy from the association named ariaLabelledBy.
setEnabled(bEnabled)Sets a new value for property enabled.
setEnableTickmarks(bEnableTickmarks)Sets a new value for property enableTickmarks.
setInputsAsTooltips(bInputsAsTooltips)Sets a new value for property inputsAsTooltips.
setMax(fMax)Sets a new value for property max.
setMin(fMin)Sets a new value for property min.
setName(sName)Sets a new value for property name.
setProgress(bProgress)Sets a new value for property progress.
setScale(oScale)Sets the aggregated scale.
setShowAdvancedTooltip(bShowAdvancedTooltip)Sets a new value for property showAdvancedTooltip.
setShowHandleTooltip(bShowHandleTooltip)Sets a new value for property showHandleTooltip.
setStep(fStep)Sets a new value for property step.
setValue(fNewValue, mOptions)Sets the property value.
setWidth(sWidth)Sets a new value for property width.
stepDown(iStep?)Decrements the value by multiplying the step the step with the given parameter.
stepUp(iStep?)Increments the value by multiplying the step with the given parameter.
Constructor Detail
new sap.m.Slider(sId?, mSettings?)

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 for a general description of the syntax of the settings object.

The supported settings are:

  • Properties

  • Aggregations

    • scale : sap.m.IScale (default)

  • Associations

  • Events

    • change : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]
    • liveChange : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
stringsId?ID for the new control, generated automatically if no ID is given
objectmSettings?Initial settings for the new control
Event Detail
change(oControlEvent)
This event is triggered after the end user finishes interacting, if there is any change.
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
floatoControlEvent.getParameters.valueThe current value of the slider after a change.
liveChange(oControlEvent)
This event is triggered during the dragging period, each time the slider value changes.
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
floatoControlEvent.getParameters.valueThe current value of the slider after a live change.
Method Detail
sap.m.Slider.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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.

Parameters:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.m.Slider.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.m.Slider.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addAriaLabelledBy(vAriaLabelledBy): sap.m.Slider
Adds some ariaLabelledBy into the association ariaLabelledBy.
Parameters:
sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledBythe ariaLabelledBy to add; if empty, nothing is inserted
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.27.0
attachChange(oData?, fnFunction, oListener?): sap.m.Slider

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.

Parameters:
objectoData?An application-specific payload object that will be passed to the event handler along with the event object when firing the event
functionfnFunctionThe function to be called when the event occurs
objectoListener?Context object to call the event handler with. Defaults to this sap.m.Slider itself
Returns:
sap.m.SliderReference to this in order to allow method chaining
attachLiveChange(oData?, fnFunction, oListener?): sap.m.Slider

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.

Parameters:
objectoData?An application-specific payload object that will be passed to the event handler along with the event object when firing the event
functionfnFunctionThe function to be called when the event occurs
objectoListener?Context object to call the event handler with. Defaults to this sap.m.Slider itself
Returns:
sap.m.SliderReference to this in order to allow method chaining
destroyScale(): sap.m.Slider
Destroys the scale in the aggregation scale.
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.46
detachChange(fnFunction, oListener): sap.m.Slider

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.

Parameters:
functionfnFunctionThe function to be called, when the event occurs
objectoListenerContext object on which the given function had to be called
Returns:
sap.m.SliderReference to this in order to allow method chaining
detachLiveChange(fnFunction, oListener): sap.m.Slider

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.

Parameters:
functionfnFunctionThe function to be called, when the event occurs
objectoListenerContext object on which the given function had to be called
Returns:
sap.m.SliderReference to this in order to allow method chaining
fireChange(mParameters?): sap.m.Slider
Fires event change to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
floatmParameters.value?The current value of the slider after a change.
Returns:
sap.m.SliderReference to this in order to allow method chaining
fireLiveChange(mParameters?): sap.m.Slider
Fires event liveChange to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
floatmParameters.value?The current value of the slider after a live change.
Returns:
sap.m.SliderReference to this in order to allow method chaining
getAriaLabelledBy(): sap.ui.core.ID[]
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Returns:
sap.ui.core.ID[]
Since:
1.27.0
getEnabled(): boolean

Gets current value of property enabled.

Indicates whether the user can change the value.

Default value is true.

Returns:
booleanValue of property enabled
getEnableTickmarks(): boolean

Gets current value of property enableTickmarks.

Enables tickmarks visualisation

Default value is false.

Returns:
booleanValue of property enableTickmarks
Since:
1.44
getInputsAsTooltips(): boolean

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 showAdvancedTooltips is set to true.

Default value is false.

Returns:
booleanValue of property inputsAsTooltips
Since:
1.42
getMax(): float

Gets current value of property max.

The maximum value.

Default value is 100.

Returns:
floatValue of property max
getMin(): float

Gets current value of property min.

The minimum value.

Default value is 0.

Returns:
floatValue of property min
getName(): string

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 .

Returns:
stringValue of property name
getProgress(): boolean

Gets current value of property progress.

Indicate whether a progress bar indicator is shown.

Default value is true.

Returns:
booleanValue of property progress
getScale(): sap.m.IScale

Gets content of aggregation scale.

Scale for visualisation of tickmarks and labels

Returns:
sap.m.IScale
Since:
1.46
getShowAdvancedTooltip(): boolean

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 showHandleTooltips. This will cause only the advanced tooltip to be shown.

Default value is false.

Returns:
booleanValue of property showAdvancedTooltip
Since:
1.42
getShowHandleTooltip(): boolean

Gets current value of property showHandleTooltip.

Indicate whether the handle tooltip is shown.

Default value is true.

Returns:
booleanValue of property showHandleTooltip
Since:
1.31
getStep(): float

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.

Returns:
floatValue of property step
getValue(): float

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.

Returns:
floatValue of property value
getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

Defines the width of the control.

Default value is 100%.

Returns:
sap.ui.core.CSSSizeValue of property width
removeAllAriaLabelledBy(): sap.ui.core.ID[]
Removes all the controls in the association named ariaLabelledBy.
Returns:
sap.ui.core.ID[]An array of the removed elements (might be empty)
Since:
1.27.0
removeAriaLabelledBy(vAriaLabelledBy): sap.ui.core.ID
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Parameters:
int|sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledByThe ariaLabelledBy to be removed or its index or ID
Returns:
sap.ui.core.IDThe removed ariaLabelledBy or null
Since:
1.27.0
setEnabled(bEnabled): sap.m.Slider

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.

Parameters:
booleanbEnabledNew value for property enabled
Returns:
sap.m.SliderReference to this in order to allow method chaining
setEnableTickmarks(bEnableTickmarks): sap.m.Slider

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.

Parameters:
booleanbEnableTickmarksNew value for property enableTickmarks
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.44
setInputsAsTooltips(bInputsAsTooltips): sap.m.Slider

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

Parameters:
booleanbInputsAsTooltipsNew value for property inputsAsTooltips
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.42
setMax(fMax): sap.m.Slider

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.

Parameters:
floatfMaxNew value for property max
Returns:
sap.m.SliderReference to this in order to allow method chaining
setMin(fMin): sap.m.Slider

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.

Parameters:
floatfMinNew value for property min
Returns:
sap.m.SliderReference to this in order to allow method chaining
setName(sName): sap.m.Slider

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 .

Parameters:
stringsNameNew value for property name
Returns:
sap.m.SliderReference to this in order to allow method chaining
setProgress(bProgress): sap.m.Slider

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.

Parameters:
booleanbProgressNew value for property progress
Returns:
sap.m.SliderReference to this in order to allow method chaining
setScale(oScale): sap.m.Slider
Sets the aggregated scale.
Parameters:
sap.m.IScaleoScaleThe scale to set
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.46
setShowAdvancedTooltip(bShowAdvancedTooltip): sap.m.Slider

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

Parameters:
booleanbShowAdvancedTooltipNew value for property showAdvancedTooltip
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.42
setShowHandleTooltip(bShowHandleTooltip): sap.m.Slider

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.

Parameters:
booleanbShowHandleTooltipNew value for property showHandleTooltip
Returns:
sap.m.SliderReference to this in order to allow method chaining
Since:
1.31
setStep(fStep): sap.m.Slider

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.

Parameters:
floatfStepNew value for property step
Returns:
sap.m.SliderReference to this in order to allow method chaining
setValue(fNewValue, mOptions): sap.m.Slider

Sets the property value.

Default value is 0.

Parameters:
floatfNewValuenew value for property value.
objectmOptions
Returns:
sap.m.Sliderthis to allow method chaining.
setWidth(sWidth): sap.m.Slider

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

Parameters:
sap.ui.core.CSSSizesWidthNew value for property width
Returns:
sap.m.SliderReference to this in order to allow method chaining
stepDown(iStep?): sap.m.Slider
Decrements the value by multiplying the step the step with the given parameter.
Parameters:
intiStep?, Default: 1The number of steps the slider goes down.
Returns:
sap.m.Sliderthis to allow method chaining.
stepUp(iStep?): sap.m.Slider
Increments the value by multiplying the step with the given parameter.
Parameters:
intiStep?, Default: 1The number of steps the slider goes up.
Returns:
sap.m.Sliderthis to allow method chaining.