# 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](/reference/resources/themes.md).

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.