Slider
The Slider component offers simple or range sliders. It is based on the angularjs-slider project.
Content under construction
Table of contents
Slider examples
Here is a screenshot of a form with a few sliders in action:
Slider properties
Slider properties can be found here.
Function properties
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:
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:
Custom types
Gradient type
Gradient properties can be found here.
Slider events
Slider events can be found here.
Slider API
Slider API methods can be found here.
Custom styling
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 |
Related Articles
The following articles are recommended for additional reading
Last updated
