# Slider

The Slider element adds a customizable slider to the Floating UI, allowing end users to adjust numerical values of a variable (this variable can be applied to various Studio parameters, e.g., object size). More on variables: [**Variables & Expressions (Beta)**](https://www.notion.so/Variables-Expressions-Beta-18ae64cc93f380dca11fedb9035be422?pvs=21)

A detailed project example using the slider is available here: [#example](https://open-2v.gitbook.com/url/help.vectary.com/documentation/variables-and-expressions#example "mention")

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FXC6wTWP7EjYqq86IwdJS%2Fslider.gif?alt=media&#x26;token=9318b0bc-ebeb-4231-a851-6639d422f8ed" alt="" width="306"><figcaption></figcaption></figure></div>

#### Settings

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FGal1veIlH5fDMk9f2RdO%2Fimage.png?alt=media&#x26;token=1b95f3f2-85e2-443d-a076-0e3f72a781bd" alt="" width="238"><figcaption></figcaption></figure></div>

* **Variable** - select an existing variable from the list
* **Range** - set the minimum and maximum values
* **Step** - define the step increment for value changes

**Thumb** and **Track** of the slider can be customized (color, size, thickness)

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FzUnWKzA48aR3plVJSbyE%2Fimage.png?alt=media&#x26;token=dd60ab8d-dd42-4a2d-ad70-3130a5097e24" alt="" width="252"><figcaption></figcaption></figure></div>
