How To Add Range Slider for Elementor forms page buider

If you want your user can select a number from a defined range of numbers by dragging the handle in the WordPress range slider box. You should read this post.

Table of contents:

What is a ranger slider?

range slider

In Elementor Pro, the Range Field is a form field widget that allows users to select a value from a predefined range. It is commonly used in forms where users need to input a numerical value within a specific range, such as age, price, or quantity.

It provides an intuitive and interactive way for users to input numerical data. Instead of manually typing in a value, users can simply slide a handle along a track to select their desired value. 

Why you should add a range slider to your forms?

Incorporating range sliders into your forms can have many benefits:

  • Enhanced User Experience: Range sliders offer a more engaging and interactive user experience compared to traditional input fields. Users can visually see their selected value and easily adjust it by dragging the slider handle. This intuitive interface can improve user satisfaction and reduce form abandonment rates.
  • Increased Precision: Range sliders allow users to select values with greater precision. This can be particularly useful when collecting data that requires specific numerical inputs.
  • Visual Feedback: As users interact with the range slider, they receive immediate visual feedback. The selected value is displayed in real-time, providing users with a clear understanding of their input. This visual feedback helps users make informed decisions and ensures accuracy in data collection.

Range Slider Settings

Skins and looks

These are some skins we offer for your range sliders.

Skins and looks range  slider

How to add range slider fields?

To add range slider fields to your Elementor forms, you can follow these steps

1. Edit Your Form: Begin by opening the page or post where you want to add the form in Elementor. Edit the page using Elementor’s visual editor.

Edit Your elementor Form

2. Add the Form Widget: In Elementor’s widget panel, search for the “Form” widget. Drag and drop the Form widget onto the desired section of your page.

 Add the Form Widget:

3. Add a Form Field: To add the range slider field, click on the “+” icon within the Form widget to add a new form field.

4. Select Range Slider Type: In the form field selection window, use the search bar to find the “Range Slider” type. Click on it to add the range slider field to your form.

Select Range Slider Type:

5. Customize Range Slider Settings: After adding the range slider field, you can customize its settings. You can adjust the range values, step size, labels, and other appearance options depending on your requirements.

How to set type to double/ single?

The terms “single” and “double” refer to the number of handles or controls available on the slider. Here’s an explanation of the difference between single and double-range sliders:

  • Single Range Slider: has one handle that users can drag along the track to select a value within a predefined range. Users can position the handle anywhere within the range to indicate their desired value. Single range sliders are commonly used when you need users to select a single value within a range, such as selecting a specific price point or choosing a value on a scale.
  • Double Range Slider: also known as a dual-handle range slider, features two handles that users can independently manipulate to define a range between two values.  Users can customize the selected range by adjusting the positions of both handles. Double range sliders are useful when you want users to select a range of values, such as selecting a date range, specifying a budget range, or setting a range of quantities

To set, you just want to choose type Single or Double in the box:

How to set type to double/ single?
How to set type to double/ single?

How to set min/max value, range,start point, and slider step?

  • Min and Max Value: The min is the value from where the slider value will start, and the max is the value where the slider value ends. If you choose 200 as min and 1000 as max, the user can select a value in between this range.

Look for the Min/Max boxes and enter the minimum and maximum values for the range in the box. 

How to set min/max value, range,start point, and slider step?
Min and Max Value:
  • Set Slider Step: The slider step determines the increment or decrement when users slide the range slider handle. To set the step size, look for the “Step” option within the Field Options. Enter the desired numerical value for the step size. For example, if you set the step size to 5, the slider will move in increments of 5 as users interact with it.
Set Slider Step: T

How to set custom values?

You can customize the values on the range slider like below.


We create custom day values by typing in the check box below as format: Mon|Tue|Wed|Thu|Fri|Sat|Sun

You can customize the values on the range slider like below.
You can customize the values on the range slider like below.

How to set prefix, postfix?

Fill the icon, text…into the blank spot.

prefix, postfix
prefix, postfix

Table settings options

skindata-skinflatstringChoose UI skin to use (flat, big, modern, round, sharp, square)
typedata-typesinglestringChoose slider type, could be single – for one handle, or double for two handles
mindata-min10numberSet slider minimum value
maxdata-max100numberSet slider maximum value
fromdata-fromminnumberSet start position for left handle (or for single handle)
todata-tomaxnumberSet start position for right handle
stepdata-step1numberSet sliders step. Always > 0. Could be fractional
min_intervaldata-min-interval-numberSet minimum diapason between sliders. Only for double type
max_intervaldata-max-interval-numberSet minimum maximum between sliders. Only for double type
drag_intervaldata-drag-intervalfalsebooleanAllow user to drag whole range. Only for double type
valuesdata-values[]arraySet up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed
from_fixeddata-from-fixedfalsebooleanFix position of left (or single) handle
from_mindata-from-minminnumberSet minimum limit for left (or single) handle
from_maxdata-from-maxmaxnumberSet maximum limit for left (or single) handle
from_shadowdata-from-shadowfalsebooleanHighlight the limits for left handle
to_fixeddata-to-fixedfalsebooleanFix position of right handle
to_mindata-to-minminnumberSet minimum limit for right handle
to_maxdata-to-maxmaxnumberSet maximum limit for right handle
to_shadowdata-to-shadowfalsebooleanHighlight the right handle
prettify_enableddata-prettify-enabledtruebooleanImprove readability of long numbers: 10000000 → 10 000 000
prettify_separatordata-prettify-separatorstringSet up your own separator for long numbers: 10000000 → 10,000,000 etc.
prettify-nullfunctionSet up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates
force_edgesdata-force-edgesfalsebooleanSliders handles and tooltips will be always inside it’s container
keyboarddata-keyboardtruebooleanActivates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
griddata-gridtruebooleanEnables grid of values above the slider
grid_margindata-grid-margintruebooleanSet left and right grid gaps
grid_numdata-grid-num4numberNumber of grid units
grid_snapdata-grid-snapfalsebooleanSnap grid to sliders step (step param). If activated, grid_num will not be used. Max steps = 50
hide_min_maxdata-hide-min-maxfalsebooleanHides min and max labels
hide_from_todata-hide-from-tofalsebooleanHides from and to labels
prefixdata-prefixstringSet prefix for values. Will be set up right before the number: **$**100
postfixdata-postfixstringSet postfix for values. Will be set up right after the number: 100k
max_postfixdata-max-postfixstringSpecial postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
decorate_bothdata-decorate-bothtruebooleanUsed for double type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
values_separatordata-decorate-both-stringSet your own separator for close values. Used for double type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
input_values_separatordata-input-values-separator;stringSeparator for double values in input value property. <input value="25;42">
disabledata-disablefalsebooleanLocks slider and makes it inactive. Input is disabled too. Invisible to forms

Final Words

We highly encourage you to consider acquiring this exceptional plugin Elementor Range Slider to enhance your website. With its powerful features and seamless integration with Elementor, this plugin offers numerous benefits that can significantly boost your online presence and drive conversions.

Don’t miss out on this opportunity to unlock the full potential of your website!

You can view this video: How To Add Range Slider Field On Your Elementor Forms?

That’s it! We hope this article helped you learn how to use Range Slider with Elementor Forms.