The Slider component offers simple or range sliders. It is based on the angularjs-slider project.

• Slider examples
• Slider properties
  • Function properties
• Custom types
  • Gradient type
• Slider events
• Slider API
• Custom styling

Here is a screenshot of a form with a few sliders in action:

The component has the following properties:

Property	Type	Default	Description
autoHideLimitLabels	Boolean	true	Set to false to disable the auto-hiding behavior of the limit labels
ceil	Number	dataProvider value	Maximum value for a slider
dataChangeOnSlideEnd	Boolean	true	Set this to false to update the dataProvider(s) while the user drags the slider and not only when the user is done dragging
dataProvider	dataProvider	null	The dataProvider for the slider value (or the minimum value when using a range slider)
dataProviderHigh	dataProvider	null	The dataProvider for a range slider's maximum value
draggableRange	Boolean	false	When set to true and using a range slider, the range can be dragged by the selection bar. Applies to range slider only.
draggableRangeOnly	Boolean	false	Same as draggableRange but the slider range can't be changed. Applies to range slider only.
enabled	Boolean	true	Set to false to disable the slider.
enforceRange	Boolean	true	Set to true to round the value and valueHigh to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider.
enforceStep	Boolean	true	Set to true to force the value to be rounded to the step, even when modified from the outside.. When set to false, if the model values are modified from outside the slider, they are not rounded and can be between two steps.
floor	Number	0	Minimum value for a slider
formattingFunction	String	null	Can be given a function code as string that can be used to format numbers client side. The formatting function receives the value to be formatted and the type of value it gets. As value types it can receive one of 'value', 'high' (the high label), 'floor' (the floor label), 'ceil' (the ceil label) or 'tick-value'. It can return any string that will be used to display the given value. See Function properties on how to provide a function.
getLegendFunction	String	null	Can be given a function code as string that can be used to display legend under ticks (thus, it needs to be used along with showTicks or showTicksValues). The function will be called with each tick value and returned content will be displayed under the tick as a legend. If the returned value is null, then no legend is displayed under the corresponding tick. You can also directly provide the legend values in the stepsValueList option. See Function properties on how to provide a function.
hideLimitLabels	Boolean	false	Set to true to hide min / max labels
hidePointerLabels	Boolean	false	Set to true to hide pointer labels
logScale	Boolean	false	Set to true to use a logarithmic scale to display the slider
maxLimit	Number	null	The maximum value authorized on the slider.
maxRange	Number	null	The maximum range authorized on the slider. Applies to range slider only.
minLimit	Number	null	The minimum value authorized on the slider.
minRange	Number	null	The maximum value authorized on the slider.
noSwitching	Boolean	false	Set to true to prevent to user from switching the min and max handles. Applies to range slider only.
numberFormat	String	null	A Servoy number format that is used to format numbers when a formattingFunction is not provided.
pointerColorFunction	Boolean	true	Function provided as a String that returns the color of a tick. The function receives the value and pointerType (either value or high) as argument. If your color won't change, don't use this option but set it through CSS. See Function properties on how to provide a function.
precision	Number	0	The precision to display values with. The toFixed() is used internally for this.
pushRange	Boolean	false	Set to true to have a push behavior. When the min handle goes above the max, the max is moved as well (and vice-versa). The range between min and max is defined by the step option (defaults to 1) and can also be override by the minRange option. Applies to range slider only.
rightToLeft	Boolean	false	Set to true to show graphs right to left. If vertical is true it will be from top to bottom and left / right arrow functions reversed.
selectionBarColorFunction	String	null	Function code as String that returns the current color of the selection bar. If your color won't change, don't use this option but set it through CSS. If the returned color depends on a model value (either dataProvider or dataProviderHigh), you should use the value argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated. The function receives the value and the valueHigh when using range sliders. See Function properties on how to provide a function.
selectionBarGradient	gradient	null	Use to display the selection bar as a gradient.
showOuterSelectionBars	Boolean	false	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.
showSelectionBar	Boolean	false	Set to true to always show the selection bar before the slider handle.
showSelectionBarEnd	Boolean	false	Set to true to always show the selection bar after the slider handle.
showTicks	Boolean	false	Set to true to display a tick for each step of the slider.
showTicksValues	Boolean	false	Set to true to display a tick and the step value for each step of the slider.
step	Number	1	Step between each value.
stepsArray	Array<*>	null	If you want to display a slider with non linear/number steps. Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically.
stepsValueList	ValueList	null	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).
styleClass	String	null	Additional style class(es) for the slider component.
tickColorFunction	Boolean	true	Function provided as a String that returns the color of a tick. showTicks must be enabled. The function receives the tick value as argument. See Function properties on how to provide a function.
ticksArray	Array	null	Use to display ticks at specific positions. The array contains the index of the ticks that should be displayed. For example, [0, 1, 5] will display a tick for the first, second and sixth values.
ticksTooltipFunction	String	null	Used to display a tooltip when a tick is hovered. Set to a function as string that returns the tooltip content for a given value. See Function properties on how to provide a function.
ticksInterval	Number	null	Number of steps between each tick to display ticks at intermediate positions.
ticksValuesInterval	Number	null	Number of steps between each tick to display tick values at intermediate positions.
ticksValuesTooltipFunction	String	null	Same as ticksTooltipFunction but for ticks values. See Function properties on how to provide a function.
vertical	Boolean	false	Set to true to display the slider vertically. The slider will take the full height of its parent. Changing this value at runtime is not currently supported.

Some properties above are named "Function" that take a string with the full function definition. Please not that a function reference to a Servoy function will not work (something like forms.abc.myMethod).

These functions are sent to the client as such and will execute client side. This reduces the roundtrips to the server.

Here is an example of the formattingFunction that will divide each value by 1000 and display values with 1 decimal and a 'k' at the end, while tick values show without decimals:

function formatValue(value, type) { 	
	value = value / 1000;
	if (type === 'value' || type === 'high') {
		return numberFormat(value, '#,###.0') + 'k'; 
	} else {
		return numberFormat(value, '#,###') + 'k'; 
	}
}

Note: the example method above calls a method numberFormat which formats a number with the given Servoy format. This method is always present client side and can be called by any function provided to the component.

This function has been entered in designer as a string as shown below:

Gradient is a component specific javascript type used for selectionBarGradient property the with the following properties:

Property	Type	Default	Description
from	Color	null	the from color of the gradient
to	Color	null	the to color of the gradient

Event	Params	Description
onDataChange	oldValue:Object, newValue:Object, event:JSEvent	Called when the dataProvider value changed. Note that depending on the property dataChangeOnSlideEnd the onDataChange event is either only fired when the user stops sliding or for each step the users slides over.
onDataChangeHigh	oldValue:Object, newValue:Object, event:JSEvent	Called when the dataProviderHigh value changed. Note that depending on the property dataChangeOnSlideEnd the onDataChangeHigh event is either only fired when the user stops sliding or for each step the users slides over.
onSlideStart	event:JSEvent, value:Object, highValue:Object, pointerType:String	Fired when the user starts sliding. The pointerType provided is either value or high depending on which slider is dragged when using a range slider
onSlideEnd	event:JSEvent, value:Object, highValue:Object, pointerType:String	Fired when the user stops sliding. The pointerType provided is either value or high depending on which slider is dragged when using a range slider

The slider component currently has only API method:

Method	Params	Return	Description
refresh		void	Re-renders the slider.

Re-renders the slider.

Params none

Returns none

The Slider component consists of one <div> containing the slider element. The outer div has the svy-slider-container class attached, while the slider itself can be addressed using the svy-slider class and/or the ones that were set via the styleClass property.

To address single items of the slider, these classes can be used:

element selector	summary
.svy-slider .rz-bar	the slider bar
.svy-slider .rz-pointer	the pointer
.svy-slider .rz-tick	a tick
.svy-slider .rz-bubble	a label bubble