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:
step
property. showAdvancedTooltip
shows an input field above the handleinputsAsTooltips
enables the user to enter a specific value in the handle's tooltip. The most important properties of the Slider are:
showAdvancedTooltip
- Determines if a tooltip should be displayed above the handleinputsAsTooltips
- Determines if the tooltip displayed above the slider's handle should include an input fieldThe most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
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 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 |
Name | Type | Default Value | Description |
---|---|---|---|
enableTickmarks | boolean | false | Enables tickmarks visualisation |
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 |
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 |
showHandleTooltip | boolean | true | Indicate whether the handle tooltip is shown. |
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 |
width | sap.ui.core.CSSSize | 100% | Defines the width of the control. Visibility: public |
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 |
_defaultTooltips | 0..n | sap.m.SliderTooltipBase |
Multiple Aggregation for Tooltips |
_handlesLabels | 0..n | sap.ui.core.InvisibleText |
Invisible text for handles and progress announcement |
_tooltipContainer | 0..1 | sap.ui.core.Control |
A Container popup that renders SliderTooltips The actual type should be sap.m.SliderTooltipContainer |
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 |
scale (default) | 0..1 | sap.m.IScale |
Scale for visualisation of tickmarks and labels |
Name | Cardinality | Type | Description |
---|---|---|---|
ariaLabelledBy | 0..n | sap.ui.core.Control |
Association to controls / IDs which label this control (see WAI-ARIA attribute |
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. |
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 When called, the context of the event handler (its This event is triggered after the end user finishes interacting, if there is any change. |
attachLiveChange |
Attaches event handler When called, the context of the event handler (its 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 The passed function and listener object must match the ones used for event registration. |
detachLiveChange |
Detaches event handler 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
|
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 |
getEnableTickmarks |
Gets current value of property enableTickmarks. Enables tickmarks visualisation Default value is |
getInputsAsTooltips |
Gets current value of property inputsAsTooltips. Indicates whether input fields should be used as tooltips for the handles. Note: Setting this option to Default value is |
getMax |
Gets current value of property max. The maximum value. Default value is |
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 |
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 |
getProgress |
Gets current value of property progress. Indicate whether a progress bar indicator is shown. Default value is |
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 Default value is |
getShowHandleTooltip |
Gets current value of property showHandleTooltip. Indicate whether the handle tooltip is shown. Default value is |
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 |
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 Default value is |
getWidth |
Gets current value of property width. Defines the width of the control. Default value is |
handleTooltipChange |
Handles change of Tooltip's inputs. |
indexOfCustomTooltip |
Checks for the provided |
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 Default value is |
setEnableTickmarks |
Sets a new value for property enableTickmarks. Enables tickmarks visualisation When called with a value of Default value is |
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 When called with a value of Default value is |
setMax |
Sets a new value for property max. The maximum value. When called with a value of Default value is |
setMin |
Sets a new value for property min. The minimum value. When called with a value of Default value is |
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 Default value is |
setProgress |
Sets a new value for property progress. Indicate whether a progress bar indicator is shown. When called with a value of Default value is |
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 When called with a value of Default value is |
setShowHandleTooltip |
Sets a new value for property showHandleTooltip. Indicate whether the handle tooltip is shown. When called with a value of Default value is |
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 Default value is |
setValue |
Sets the property Default value is |
setWidth |
Sets a new value for property width. Defines the width of the control. When called with a value of Default value is |
stepDown |
Decrements the value by multiplying the step the |
stepUp |
Increments the value by multiplying the |
updateAdvancedTooltipDom |
Updates value of the advanced tooltip. |
updateTooltipsPositionAndState |
Updates values of Slider and repositions tooltips. |
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 |
Adds some customTooltip to the aggregation customTooltips.
Param | Type | DefaultValue | Description |
---|---|---|---|
oCustomTooltip | sap.m.SliderTooltipBase |
The customTooltip to add; if empty, nothing is inserted |
Creates default tooltips, if needed, and forwards properties to them
Param | Type | DefaultValue | Description |
---|---|---|---|
aTooltipIds | Array |
Array of strings for ID generation |
Creates custom tooltips, if needed, and forwards properties to them
Param | Type | DefaultValue | Description |
---|---|---|---|
iTooltipCount | number |
Count of the tooltips |
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 |
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 |
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 |
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 |
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 |
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. |
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. |
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 |
Forwards properties to default tooltips
Param | Type | DefaultValue | Description |
---|---|---|---|
iTooltipCount | number |
Count of the tooltips |
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
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
Gets current value of property enabled.
Indicates whether the user can change the value.
Default value is true
.
Gets current value of property enableTickmarks.
Enables tickmarks visualisation
Default value is false
.
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
.
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
.
Gets current value of property progress.
Indicate whether a progress bar indicator is shown.
Default value is true
.
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
.
Gets current value of property showHandleTooltip.
Indicate whether the handle tooltip is shown.
Default value is true
.
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
.
Gets the tooltips that should be shown. Returns custom tooltips if provided. Otherwise - default tooltips
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
.
Gets current value of property width.
Defines the width of the control.
Default value is "100%"
.
Handles change of Tooltip's inputs.
Param | Type | DefaultValue | Description |
---|---|---|---|
oEvent | jQuery.Event |
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 |
Assigns tooltips and forwards properties to them
Param | Type | DefaultValue | Description |
---|---|---|---|
aTooltipIds | Array |
Array of strings for ID generation |
Creates a default SliderTooltip instance and adds it as an aggregation
Param | Type | DefaultValue | Description |
---|---|---|---|
sId | string |
The tooltip ID |
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 |
Removes all the controls from the aggregation customTooltips.
Additionally, it unregisters them from the hosting UIArea.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Sets the aggregated scale.
Param | Type | DefaultValue | Description |
---|---|---|---|
oScale | sap.m.IScale |
The scale to set |
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 |
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 |
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 |
Sets the property value
.
Default value is 0
.
Param | Type | DefaultValue | Description |
---|---|---|---|
fNewValue | float |
new value for property |
|
mOptions | object |
The options object |
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 |
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. |
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. |