Range Field

Easily integrate a numeric range slider into your forms with the range field.
More From This Segment

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
Play Video
THIS FEATURE IS PART OF :

Got A Question ?

We Are Here to Help

Range Field

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

More Modules
Woo Gloo
NEW
Woo Gloo
NEW
Power Gloo
Dokan Kit
Forms Extensions
NEW
Fluid Dynamic
NEW
Buddypress \ BuddyBoss
NEW
Forms Extensions
NEW
Forms Extensions
Membership Extensions
Forms Extensions
NEW
Fluid Dynamic
NEW

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!