---
title: "Add Range Slider Field"
url: https://docs.coolplugins.net/doc/range-slider-elementor-form/
date: 2025-06-02
modified: 2026-07-02
author: "Satinder Singh"
description: "A Range Slider is a powerful form element that allows users to select a numeric value or a value within a defined range using a draggable slider. https://youtu.be/BpKUFh-RKZY?si=FLtLGXEjUM-hzEW_ Why use..."
categories:
  - "Cool FormKit for Elementor"
word_count: 285
---

# Add Range Slider Field

A **Range Slider** is a powerful form element that allows users to select a numeric value or a value within a defined range using a draggable slider.

https://youtu.be/BpKUFh-RKZY?si=FLtLGXEjUM-hzEW_

## Why use Range Slider

Using a range slider, you can eliminate problems like typos, out-of-range inputs, formatting errors and more due to typing numeric values manually. This makes your forms more user-friendly and error-free. With Cool FormKit, adding a range slider to your Elementor forms is easy and requires no coding.

Follow these simple steps to add a [range slider in Elementor forms](https://coolformkit.com/features/range-slider-for-elementor-form/):

## Add Range Slider 

*Firstly, make sure you have **“Turned on”** the Range Slider Field feature in the **WordPress Admin Panel → Elementor → Cool FormKit → Form Elements Tab**.

- Navigate to the **Content** section of your **Form Field**.

[![range slider type selection](https://docs.coolplugins.net/wp-content/uploads/2025/05/range-slider-type-selection.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/05/range-slider-type-selection.jpg)

- From the **Field Type** dropdown, select **Range Slider**.

## Customization

Once you've selected the Range Slider field, you can customize its behavior and appearance using the following options:

[![range slider customization options ](https://docs.coolplugins.net/wp-content/uploads/2025/06/range-slider-custom-options.png)](https://docs.coolplugins.net/wp-content/uploads/2025/06/range-slider-custom-options.png)

- **Min & Max Value**: Set the minimum and maximum range for your 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.

- **End Value** – Sets the default ending value for a** double-ended **range slider.

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

- **Range Type**: Switch between a **Single** **slider** for selecting one value and a **Double slider** for selecting a range of values.

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