How To Create a Number Range Slider in WordPress

Picture a visitor dragging a handle to set a budget or a loan amount instead of typing digits into a box. That's a range slider field, and Formidable Forms has one built in, no paid add-on required. In this guide, we'll show you how to add it to your WordPress forms in minutes.

Approximate read time: 8 minutes

What a range slider field looks like in action

A range slider field takes seconds to add to any form, and it turns a plain number box into something visitors actually enjoy using.

The minimum value sits on the left, the maximum on the right, and the visitor drags the handle to pick a number in between.

The selected value is saved with the rest of the form entry, so you can use it in calculations, conditional logic, and email notifications like any other field.

Sliders work best anywhere the answer is a number within a range, not one specific figure:

• Loan amounts and terms in a mortgage or car payment calculator
• Budget ranges in a quote request or project inquiry form
• Guest counts in an event booking form
• Donation amounts on a giving form
• Satisfaction ratings in a survey (0 to 10 works beautifully)
• Bedrooms, square footage, or price range in a real estate search form

They're especially good on phones. Tapping and dragging a handle beats typing numbers into a tiny keyboard, which is a big deal now that most form fills happen on mobile.

Sliders also feed directly into calculators. If you plan to show a price, payment, or score based on the slider value, the price calculator guide picks up right where this tutorial ends.

What you need for a slider form in WordPress

The slider field is a premium field in Formidable Forms. It's included in every paid license, starting with Basic. If you want your slider to drive live calculations, like the loan example above, calculator features are part of the Business license.

There's no separate add-on to install and nothing to code. Once your license is active, the slider field simply appears in the form builder.

How to create a range slider in WordPress (3 steps)

There are only three steps between you and a working slider field: install Formidable Forms, drag the slider onto your form, and set it up the way you want it. No code required, and the whole thing takes just a few minutes.

Step 1: Install Formidable Forms

If you don't have Formidable Forms yet, install the free version first.

From your WordPress dashboard, go to Plugins → Add New, search for Formidable, then install and activate it like any other plugin.

Next, add your license. After purchasing a plan, go to Formidable → Global Settings in your WordPress admin and enter your license key.

That unlocks the premium fields, including the slider. Every purchase is backed by a 14-day money-back guarantee, so there's no risk in trying it.

Step 2: Add the slider field to your form

Head to Formidable → Forms and either open an existing form or click Add New to start fresh.

In the drag and drop form builder, click Add Fields on the left to see the full field list.

You'll find the Slider field under the Advanced Fields section. Drag it onto your form wherever you want it to appear. You can reorder it any time by dragging it to a new spot.

That's genuinely it. Your form now has a working range slider. The remaining work is telling it which numbers to offer.

Step 3: Customize your range slider field

Click the slider field in the builder and its options open on the left. A few settings do most of the work:

• Field Label: The title shown above the slider, so visitors know what they are choosing.
• Range: The minimum and maximum values. For a donation slider, that might be 5 to 500.
• Step: How far the value jumps with each movement. A loan slider might step by 1,000, while a rating slider steps by 1.
• CSS Layout Classes: Width and layout options if you want the slider narrower or side by side with another field.

If your slider represents money, set Format to Currency so values display with the right symbol and separators.

For finer control, open the Advanced settings on the field.

The Before Input and After Input boxes add text on either side of the displayed value. Type % in After Input, for example, and visitors see 5%, 10%, 15% as they drag.

Want to restyle the slider itself? Go to Formidable → Styles, open the Slider Fields section, and adjust the track and handle colors to match your brand. No CSS required, though you can add your own if you want pixel-level control.

When everything looks right, click Update to save, preview the form, then add the form to a page with the Formidable Forms block or shortcode.

Already running slider forms in a different plugin? Here's what switching to Formidable Forms looks like for the two most common ones.

Using a range slider with Contact Form 7

Contact Form 7 doesn't include a slider field in its core plugin, and it's unlikely to add one.

The plugin's maintainer has said development is feature-complete, so gaps like this are permanent decisions, not bugs waiting to be fixed.

To get a slider today, you install a third-party extension (there are several on WordPress.org, each with its own settings syntax), then add a slider tag to your form template by hand, something like [range range-price min:0 max:100].

Styling the slider means writing your own CSS, and there's no visual preview while you build.

That works, but it's fiddly, and every extension you bolt on is another thing to update and troubleshoot.

If you're maintaining CF7 slider forms today, moving them to Formidable Forms is straightforward:

1. Install Formidable Forms and rebuild the form in the visual builder. Most CF7 forms are short, so this takes minutes, and you can see the slider as you configure it.
2. Set the same min, max, and step values in the slider options instead of a tag string.
3. Swap the CF7 shortcode on your page for the Formidable Forms one.

Your old entries stay in whatever storage CF7 was using, which by default doesn't store entries at all. That's one more reason to switch: Formidable Forms saves every submission automatically.

Using a range slider with Gravity Forms

Gravity Forms also has no native slider field.

The usual route is a third-party add-on such as GP Range Slider from Gravity Wiz, which requires a Gravity Perks subscription on top of your Gravity Forms license. It works well, but you're paying two vendors and managing two updates for one field.

To bring a Gravity Forms slider form into Formidable:

1. Recreate the form in Formidable Forms' builder and drag in the built-in slider field. No extra purchase, no add-on to activate.
2. Match your range and step settings, and use Before Input and After Input for any prefix or suffix text.
3. If the slider fed a calculation, rebuild the formula in Formidable Forms' calculated fields. The cost calculator comparison shows what those calculations look like side by side.
4. Replace the embed on your page and retire the old form.

The difference in day-to-day use is that the slider is a first-class field in Formidable: it appears in conditional logic, calculations, Views, and exports without any glue code.

The slider is just one of dozens of built-in fields and features, so if you're switching over anyway, see the full feature list for everything else that comes standard.

Slider field ideas worth stealing

Once the slider is on your form, a few small touches make it feel polished:

• Pair it with a calculated field. A slider for loan amount plus a calculation for monthly payment turns a static form into an interactive tool visitors play with, and play time is time on page.
• Use conditional logic on the value. Show a "Talk to sales" section only when the budget slider passes a threshold, or reveal extra questions when a satisfaction rating comes in low.
• Keep the range honest. If 90% of your customers order between 10 and 100 units, don't make the slider run to 10,000. A tight range with a sensible step feels precise instead of vague.
• Label both ends. Before and After Input text, or a short field description, removes any doubt about what the numbers mean.

Ready to put a slider in your next form?

That's the whole process: drag in the slider field, set your range and step, and style it to match your site. In a few minutes, you have a form field that visitors actually enjoy using on both desktop and mobile.

The natural next step is to make that slider do something. Connect it to calculated fields and you have an instant quote tool, a mortgage estimator, or a donation form with a suggested-amount slider.

Our guide to building a price calculator in WordPress walks through exactly that, slider included.

Grab Formidable Forms, drop in your first slider, and see how much smoother a number question can feel.