---
title: "Add Range Slider Field"
url: https://docs.coolplugins.net/doc/range-slider-divi-contact-form/
date: 2026-03-24
modified: 2026-03-24
author: "Satinder Singh"
description: "A Range Slider allows users to select a numeric value or a value within a defined range using a draggable slider. Using the Contact Form Extender for Divi plugin, you can easily..."
categories:
  - "Contact Form Extender For Divi Builder"
word_count: 322
---

# Add Range Slider Field

A **Range Slider** allows users to select a numeric value or a value within a defined range using a draggable slider. Using the **Contact Form Extender for Divi **plugin, you can easily add a range slider field.

## Why Use Range Slider?

A range slider allows you to define a fixed minimum and maximum value based on your requirements. Instead of asking someone to type a number, the slider lets them drag and pick a value instantly, which reduces errors.

For example, if your form contains a pricing field, you can define a range from 1 to 100. While filling the form, the user can simply select any value within this range, just by moving the slider.

Follow the steps below to add a range slider field to your form:

## Add Range Slider Field

* Firstly, make sure you have **“*Turned on*“** the range slider field feature in the **WordPress Admin Panel >> Divi >> Contact Form Extender >> Form Elements Tab.**

- From the **Elements** section, click on the **edit (pencil icon)** of the field.

[![edit the element](https://docs.coolplugins.net/wp-content/uploads/2026/03/edit-the-element.png)](https://docs.coolplugins.net/wp-content/uploads/2026/03/edit-the-element.png)

- Field settings will open.

[![range slider field](https://docs.coolplugins.net/wp-content/uploads/2026/03/range-slider-field.png)](https://docs.coolplugins.net/wp-content/uploads/2026/03/range-slider-field.png)

- Scroll down to the **Field Options** section.

**Type:** Choose **range slider** as the field type.

- **Min:** Set the minimum value of the slider.

- **Max:** Set the maximum value of the slider.

- **Step:** Specify the intervals at which the slider value increases or decreases as the handle is dragged (e.g., 1, 5, 10).

- **Start From:** Set a default value to define the initial position of the slider handle when the form loads.

- **Range Style:** Choose from available style options to change the visual appearance of the slider.

- **Range Type:** Select **Single** if you want users to choose only min value value, and **Double** if you want users to choose both min and max value.

- **Before / After**: Add a prefix or suffix to your slider values (e.g., $, %, kg) to display before or after the current value, min, and max indicators.

- After being satisfied with all the changes, click **Save** to apply the changes to your form.