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