# Slider

The Slider component offers simple or range sliders. It is based on the [angularjs-slider](https://github.com/angular-slider/angularjs-slider) project.

{% hint style="info" %}
*<mark style="color:blue;">**Content under construction**</mark>*
{% endhint %}

## Table of contents

* [Slider examples](#slider-examples)
* [Slider properties](#slider-properties)
  * [Function properties](#function-properties)
* [Custom types](#custom-types)
  * [Gradient type](#gradient-type)
* [Slider events](#slider-events)
* [Slider API](#slider-api)
* [Custom styling](#custom-styling)

## Slider examples

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

![Slider screenshot](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-2ddbfee237ea58af6314d84dc162d527506b8f73%2Fexamples.png?alt=media)

## Slider properties

Slider properties can be found [here](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/slider#properties).

### 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:

```javascript
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:

![Developer function](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-af351dc33f113afa71066ba0c6e519ea93e2ff8e%2Fdeveloper_function.png?alt=media)

## Custom types

### Gradient type

Gradient properties can be found [here](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/slider#gradient).

## Slider events

Slider events can be found [here](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/slider#events).

## Slider API

Slider API methods can be found [here](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/slider#api).

## 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

* [Slider Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/slider)
* [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes)
* [Scripting the UI](https://docs.servoy.com/guides/develop/programming-guide/scripting-the-ui)