# Slider

The **Slider** allows the user to select a value from a given range of values controlled by the developer. Values represent numerical input (type `Integer` or `Float`).

{% hint style="info" %}
A full example setup of the **Slider** is available in our [Showroom](https://showroom.appfarm.app/ui-components/slider). You can view a demo and see how to set this up in Appfarm Create. If you do not have access to the Showroom, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Properties

### Value

The property that is bound to the **Slider**.

### Second Value

An optional second property which will allow the user to choose two values on the same **Slider**. This can be useful if the user needs to select a custom range, for instance.

### Min

The minimum value of the **Slider**. Default is `0`.

### Max

The maximum value of the **Slider**. Default is `100`.

### Step

The granularity of the **Slider**. E.g. if step is set to `0.5`, the user will have the option of 0, `0.5`, `1`, `1.5`, `2` and so on. Default value is `1`.

### Slider Color

The colour can be set to either `Primary` or `Secondary`, which are values determined by the active [Theme](https://docs.appfarm.io/reference/resources/themes).

### Vertical Slider

The **Slider** will appear vertically instead of horizontally if this checkbox is toggled.

### Value Label

This property can be set to `Off`, `On` or `Auto`. `Off` means that the value label is never visible to the user. `On` means that the value label is always visible to the user. `Auto` means that the value label is visible to the user on hover and on focus. Default is set to `Off`.

{% hint style="info" %}
If the precision of the value is important, it is recommended to set this property to `On` or `Auto` so that users can see the exact value of their input and adjust if necessary.
{% endhint %}

### Marks

Marks can appear on the slider at intervals, to further indicate the value of the input to the user. This property can be set to `Off`, `On` or `Custom`. `Off` means that no marks will appear to the user. `On` means that marks will appear at regular intervals, defined by the Step property. `Custom` gives the developer full flexibility to design and implement marks wherever necessary.

{% hint style="info" %}
Using custom marks is a way to customise sliders to appear to take non-numerical input, but the value stored in the database will still be numerical.
{% endhint %}

### Restrict to Marks

This property is only available when the Marks property is set to `Custom`. This means that the user can only select values defined within the custom marks.

### Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. One Event Handler is available for the **Slider** component:

**On Value Change**: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, a UI component or filter can be updated when a change is detected in the value bound to the component.