---
title: "Range slider form element"
date: "2019-09-30T10:08:03+00:00"
summary: "Add a customizable range slider to your component form with min/max values, increments, and units for precise control."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/range-slider-form-element"
id: "64d8eec3-eee2-4815-ad2b-8cd3c4e5a52b"
---

Table of contents will be added

Use the Range slider form element to add a slider to your Component form. 

For more information about creating editable components, see [Create an editable component](/drupal-starter-kits/add-ons/site-studio/create-component "Create an editable component").

Locating the range slider form element
--------------------------------------

To find the Range slider form element:

1.  Navigate to a component
2.  Click the **+ button** on the Component form builder
3.  Within the Fields tab, look for the Range slider form element.

![4d7be811-range-slider-form-element.png](https://acquia.widen.net/content/0eb8316c-9a13-46f3-9663-8a1eea3b53e6/web/4d7be811-range-slider-form-element.png)

The Range slider element includes the following fields:

Title field
-----------

*   Provide a name for the form element. **Important:** This will be displayed in your component form.

Field settings
--------------

*   **Min value** - Input the minimum value that the Range slider can be set too
*   **Max value** \- Input the maximum value that the Range slider can be set too
*   **Increments** - Input the increments that the Range slider can increase and decrease by
*   **Unit** - Input the unit for the Range slide to use.  
    When using the Range slider with Style guides, if no unit set pixels will be assumed and converted to REMs.

Default
-------

*   **Default value (optional) -** Set a default value for the Range slider.

Tooltip
-------

*   **Tooltip text -** Enter tooltip text here.
*   **Tooltip placement -** Define the position of the tooltip on hover of the field.