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