---
title: "Form Slider Element"
description: "With the Form Slider Element, User can select a Number or a Number Range. "
path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-slider-element.html
lastModified: 2025-02-25T12:18:27.532Z
---

# Form Slider Element

# Form Slider Element

### Information requested

Choose one Value from 0 to 100 in Step of 5

Choose one Value from 0 to 100 in step of 5

[How to Configure](#how-to)

### Description

The Form Slider Element Component can be used to offer an Option for Number Selection.

- Single Value or Range Selection possible
- Total Range and Steps within can be defined
- Can be made required

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-slider--interactive)

### Inspirations

### Information requested

Choose a Range of Values from 0 to 100 in Step of 5

Choose one Value from 0 to 100 in step of 5

### Usage Rules & Features

##### Features

- Single Value or Range Selection possible

##### Properties

- Fully Configurable: Define Start, End, Handle Start, Number of Pipes, and Step Width.
- Add Required Message

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | no |
| 4 | no |
| 5 | no |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | no |

##### DO's

- Use Number of Pipes of max-range (end) +1, e.g. 100:10=10 should result in 11 Pipes
- After Publishing, check Form sending works as expected
- Ensure Mulesoft Integration and Configuration is done

[Info Icon Key: info-icon-1]

[Info Icon Aria Label: Mulesoft & MT Captcha Integration]

[Info Icon Content Type: Experience fragment]

[Info Icon Content Start: info-icon-1]

##### Mulesoft & MT Captcha

Mulesoft and MT Captcha are both needed for Forms.

Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form.

[Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html)

[Info Icon Content End: info-icon-1]

##### DONT's

- Do not use it in smaller Grid then 6 Column Grid
- Try not to use it outside of Form Container - Any Kind of Form Element can be used only inside a Form Container
- Do not use it in Form Grid

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/slider_properties%3A1-1?fmt=webp)

### Form Slider Properties

For the Form Slider Properties only 4 Options are maintainable:

- Type - Standard (single or range)
- Label
- Element Name - Needed for technical Referencing
- Hide Tooltip (shown while moving Slider)

### Rules for the Element Name:

The Element Name is a technical Name and therefore, there are some Rules to make it work:

- Name must be UNIQUE
- Just use lower Case Letters
- No special Signs
- No Blancs
- No Numbers

### Slider Configuration

In Slider Configuration Tab, Editor needs to do Settings for the Slider. That means, Start (minimal Value) and End (maximal Value) as well as Handle Start (preselected Value). For Range Slider two Handle Starts need to be provided.

Furthermore, Editor can choose Steps of the Handle, as well as Number of Pipes. For Number of Pipes, it is recommended to use Number of Pipes of max-range (end) +1, e.g. 100:10=10 should result in 11 Pipes.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/slider_config-standard%3A1-1?fmt=webp)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/slider_config-range%3A1-1?fmt=webp)