Slider
(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
A Servoy Extra Component that displays a slider for selecting numeric values, supporting both single and range selection.
This is a reference page; many components have detailed usage guides here.
Properties
autoHideLimitLabels
Set to false to disable the auto-hiding behavior of the limit labels Type: Boolean Default Value: false
ceil
Maximum value for a slider Type: Number Default Value: 0
dataChangeOnSlideEnd
Set this to false to update the dataProvider(s) while the user drags the slider and not only when the user is done dragging Type: Boolean Default Value: true
dataProvider
The dataProvider for the slider value Type: Dataprovider
dataProviderHigh
The dataProvider for a range slider's maximum value Type: Dataprovider
draggableRange
When set to true and using a range slider, the range can be dragged by the selection bar Type: Boolean Default Value: false
draggableRangeOnly
Same as draggableRange but the slider range can't be changed Type: Boolean Default Value: false
enabled
Flag indicating whether the slider is enabled for user interaction. Type: Enabled Default Value: true
enforceRange
Set to true to round the value and valueHigh to the slider range Type: Boolean Default Value: false
enforceStep
Set to true to force the value to be rounded to the step Type: Boolean Default Value: false
floor
Minimum value for a slider Type: Number Default Value: 0
formattingFunction
Can be given a function code as string that can be used to format numbers client side. Type: Tagstring
getLegendFunction
Can be given a function code as string that can be used to display legend under ticks Type: Clientfunction
hideLimitLabels
Set to true to hide min / max labels Type: Boolean Default Value: false
hidePointerLabels
Set to true to hide pointer labels Type: Boolean Default Value: false
logScale
Set to true to use a logarithmic scale to display the slider Type: Boolean Default Value: false
maxLimit
The maximum value authorized on the slider. Type: Number Default Value: null
maxRange
The maximum range authorized on the slider. Type: Number Default Value: null
minLimit
The minimum value authorized on the slider. Type: Number Default Value: null
minRange
The minimum range authorized on the slider. Type: Number Default Value: null
noSwitching
Set to true to prevent to user from switching the min and max handles Type: Boolean Default Value: false
numberFormat
A Servoy number format that is used to format numbers when a formattingFunction is not provided Type: Format
pointerColorFunction
Function provided as a String that returns the color of a tick. Type: Clientfunction
precision
The precision to display values with. Type: Number Default Value: 0
pushRange
Set to true to have a push behavior. When the min handle goes above the max, the max is moved as well Type: Boolean Default Value: false
readOnly
Flag indicating whether the slider is in read-only mode. Type: Protected Default Value: false
rightToLeft
Set to true to show graphs right to left. Type: Boolean Default Value: false
selectionBarColorFunction
Function code as String that returns the current color of the selection bar. Type: Clientfunction
selectionBarGradient
Use to display the selection bar as a gradient Type: CustomType<servoyextra-slider.gradient>
showOuterSelectionBars
Only for range slider. Set to true to visualize in different colour the areas on the left/right (top/bottom for vertical range slider) of selection bar between the handles Type: Boolean Default Value: false
showSelectionBar
Set to true to always show the selection bar before the slider handle Type: Boolean Default Value: false
showSelectionBarEnd
Set to true to always show the selection bar after the slider handle Type: Boolean Default Value: false
showTicks
Set to true to display a tick for each step of the slider Type: Boolean Default Value: false
showTicksValues
Set to true to display a tick and the step value for each step of the slider Type: Boolean Default Value: false
step
Step between each value Type: Number Default Value: 1
stepsArray
If you want to display a slider with non linear/number steps. Type: Array<Number>
stepsValueList
If you want to provide all the steps with display and real values, you can provide a value list to provide step values (realValues) and step labels (displayValues). Type: Valuelist
styleClass
CSS style classes applied to the slider component. Type: Styleclass
tickColorFunction
Function provided as a String that returns the color of a tick. Type: Clientfunction
ticksArray
Use to display ticks at specific positions. The array contains the index of the ticks that should be displayed. Type: Array<Number>
ticksInterval
Number of steps between each tick to display ticks at intermediate positions. In Titanium Client you cannot select by click values between ticks, you can only drag slider pointer to select. Type: Number Default Value: null
ticksTooltipFunction
Function provided as string that returns the tooltip content for a tick. Type: Clientfunction
ticksValuesInterval
Number of steps between each tick to display tick values at intermediate positions Type: Number Default Value: 0
ticksValuesTooltipFunction
Function provided as string that returns the tooltip content for a tick value. Type: Clientfunction
vertical
Set to true to display the slider vertically. Type: Boolean Default Value: false
visible
Flag indicating whether the slider is visible. Type: Boolean Default Value: true
Events
onDataChangeHigh(oldValue,newValue,event)
Called when the dataProviderHigh value changed
Parameters:
{${dataproviderType}} oldValue The previous high slider value.
{${dataproviderType}} newValue The new high slider value.
{JSEvent} event The event object associated with the data change.
Returns: {Boolean}
onDataChangeMethodID(oldValue,newValue,event)
Called when the dataProvider value changed
Parameters:
{${dataproviderType}} oldValue The previous slider value.
{${dataproviderType}} newValue The new slider value.
{JSEvent} event The event object associated with the data change.
Returns: {Boolean}
onSlideEnd(event,value,highValue,pointerType)
Called when user stops dragging the slider
Parameters:
{JSEvent} event The event object associated with the slide end.
{Object} value The value when the user stopped dragging the pointer of a non-range slider or the low value in a range slider.
{Object} highValue The high value when the user stopped dragging the pointer in a range slider.
{String} pointerType Either "value" or "high", indicating which pointer was used.
onSlideStart(event,value,highValue,pointerType)
Called when user starts dragging the slider
Parameters:
{JSEvent} event The event object associated with the slide start.
{Object} value The value when the user dragged the pointer of a non-range slider or the low value in a range slider.
{Object} highValue The high value when the user dragged the pointer in a range slider.
{String} pointerType Either "value" or "high", indicating which pointer was dragged.
API
refresh()
Refreshes the slider
Types
gradient
Represents a gradient configuration for the slider selection bar. scripting type: CustomType<servoyextra-slider.gradient>
Last updated
Was this helpful?