Range Field

Easily integrate a numeric range slider into your forms with the range field.

watch the Range Field tutorial

Customizable single number or range sliders inside your Elementor forms.

Sometimes you may want more than a select box or a drop-down menu to let your users select a number to submit, sometimes you may need an entire range of numbers to be sent through a form. This is when the Range Field comes in: select a single value or a range of values through an easy to set-up slider.

Customization options.

Beyond the classic Label and Required fields, the first exclusive option is the Custom Values toggle. Toggling this on will replace the next two options with a field in which you can type in your custom values, separated by a comma. All these values will then print on the slider.

With the Custom Values option toggled off, you can instead simply set a start and an end value for your slider.

Set Initial Values lets you set the numbers that will be selected by default before the end user customizes their pick. Write a single number if the slider is a single slider, write two (separated by a comma) if it’s a range slider, as it says in the tooltip.

The Step option lets you fine-tune how many numbers to show on the slider by displaying the values in increments of the specified number.

Further options include choices on whether or not to show Scales, Tooltips, and the Labels of the values under the slider.

Range Slider.

The Range Slider toggle changes the slider from a single selector to one with two selectors, that can be used to submit a range of numbers. (e.g. 1 to 20). This represents a simple, all-in-one solution to allow users to send complex value selections through your Elementor Forms.

Dependencies: Elementor Pro

Frequently Asked Questions

THIS FEATURE IS PART OF :
Gloo logo - white

Range Field

Forms + Extension - header

Create and customize range sliders in your forms for more advanced value submission

More Modules

AffiliateWP Dynamic Tag
OTP Form Action New
GSAP ScrollTrigger
GSAP Video Scrolling
Woo Variation Table New
Lottie GSAP Widget New
Calculation Field New
GTM DataLayer Form Action
ActiveTrail Form Submit Action New
Datepicker Field
ACF Relationship Tag
BuddyBoss Dynamic Tag Kit
Ajax Connector
Community Dynamic Tags New
Price+ Widget New
GSAP Custom Tween New
Composer Kit Module New
JetSmartFilters: BuddyBoss Addon New
Autocomplete Address Fields
Frontend Post Submission

1. Go to your Gloo Dashboard in the WP Admin panel

2. Toggle on the Range Field in Forms Extensions

Toggle on the Range Field in Forms Extensions

3. Edit or create a new Elementor Form

Edit or create a new Elementor Form

4. Click on ADD ITEM

Click on ADD ITEM

5. Select Range Field as form field type

Select Range Field as form field type

6. Customize your slider (Toggle Range on for range slider)

Customize your slider (Toggle Range on for range slider)

7. Click on Style

Click on Style

8. Click on Range Fields to style your new field

Click on Range Fields to style your new field

9. Click on UPDATE when finished

Click on UPDATE when finished

10. Click on Preview Changes to see your new slider in action!

Click on Preview Changes to see your new slider in action!