# Slider

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-6e7092a7166f71bc75d010aabc0e0c91332506cb%2FCaptura%20de%20Pantalla%202020-02-07%20a%20la\(s\)%209.34.30.png?alt=media)

### 🎨 Styles

* **Appearance**
  * **Thumb color**: select the color in the slider control using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
  * **Thumb border color**: select the color in the slider control border using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
  * **Selection color**: select the color in the slider value using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
  * **Blank color**: select the color in the slider left value using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
* **Dimensions**
  * **Width:** set how wide the slider element is using.
  * **Height:** set how tall the slider element is using.

### ⚙ Properties

* **Generic properties**
  * **Control name:** you can add a name to the slider element this could be the way to identify this element about another elements.
  * **Enable** [**skeleton loaders**](https://docs.apphive.io/apphive-documentacion/reference/estilos/skeleton-loader)**:** this tool provides an indication to the user that something is coming but not yet available on the slider element.
  * **Control is hidden:** hide the slider element from the screen.

{% hint style="info" %}
The [**skeleton loader**](https://docs.apphive.io/apphive-documentacion/reference/estilos/skeleton-loader) component provides a user with a visual indicator that content is coming/loading. This is better received than traditional full-screen loaders.
{% endhint %}

* **Specific Properties**
  * **Slider minimum value**: initial minimum value of the slider. Default value is 0.
  * **Slider maximum value**: Initial maximum value of the slider. Default value is 5.
  * **Slider step**: Step value of the slider. The value should be between 0 and maximum value. Default step value is 1.

### 👆 Events

* **On charge:** the on charge \*\*\*\*event detects when the value of a slider element changes.