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

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:

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 selectorsummary

.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

Last updated