How To Create a Number Range Slider in WordPress

Looking for the easiest way to add a number range slider to WordPress forms? Just grab the Formidable Forms plugin and then follow these simple steps to make your user-friendly calculator.

Approximate read time: 6 minutes

Building a form and want to create a number range slider in WordPress? Don't worry, you don't have to be a coding expert. You won't have to spend days tweaking things just to make your slider... well, slide!

You only need the Formidable Forms plugin to get a working number slider on your site in seconds. Then, you can take a minute to customize the design however you like.

So, are you ready to quickly add sliders to your online calculator? Read on for a step-by-step guide on how to add number sliders to your forms the easy way.

🤔 What is a number range slider in WordPress?

The range slider in WP forms is a type of form field that lets users drag a selector along a line to land on a number from a range of pre-set values.

Here's a quick example we made with Formidable Forms' price range slider WordPress plugin:

The minimum value is on the left side of the slider, and the maximum is on the right. By clicking and dragging the selector (usually a circle), users can pick a number between those values, and their choice will be added to the form data.

Sliders are super user-friendly. In a glance, visitors know exactly how to answer the question. There's no room for confusion (and no way to enter invalid data, hooray!).

Mobile users especially love number sliders. It's a lot easier to tap and swipe on a smartphone screen than to type numbers into those tiny keyboards.📱

👉 Wondering how to create a slider in WordPress but not after a number slider? Slide-in contact forms and carousels are also often called sliders, which can lead to confusion. Sorry, but today we'll only cover WordPress number range sliders.

💡 What can you use range sliders for?

Number slider fields are great for all kinds of forms. You can use them for:

• Percentage rates in a mortgage calculator
• Loan terms in a car payment calculator
• Grade percentages in a grade calculator
• Number of bedrooms in a real estate listing form
• Amounts in a donation form

Plus, a whole lot more. Once you know how you want to use a number slider in your form, it's time to make it a reality!

Check out the video below to see how easy it is to make a mortgage calculator with a price range slider in WordPress.

🛠️ How to create a range slider in WordPress (the easy way)

There are a few other tools you could use to add sliders to your forms, including Gravity Forms, Fluent Forms, and Contact Form 7, but Formidable Forms is the best WordPress range slider plugin out there.

That's because it makes building custom sliders as simple as dragging and dropping them into your form. Plus, sliders don't require any extra add-ons like those other plugins.

And you don't need to code either! You just need Formidable Pro plus a minute or two of your time.

Step 1: Install Formidable Forms

If you don't already have the free Formidable Forms plugin, you'll first need to install it on your WordPress site. 🔌

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

Next, you'll need a license for our pro WordPress form maker, as calculations are a premium feature. As always, every purchase is backed by our 100% no-risk money-back guarantee.

Once you have your plan, activate your license by going to the Formidable → Global Settings page in your WordPress admin dashboard.

Step 2: Add the number slider to your WordPress form

Before you can add a slider, you first need a form!

From the backend of your site, head to Formidable → Forms. Select an existing form or click the Add New button at the top to start from scratch.

In the drag and drop form builder, click Add Fields on the left to see the list of form fields to choose from. You'll find the Slider field under the Advanced Fields section.

Drag the Slider field onto your form to insert a range slider. You can drop it anywhere on the form and move it around to the perfect spot. 🏗️

At this point, your number range slider is already ready to go! All that's left is to customize it so you can get the right data from your users and make it match your site's style.

Step 3: Customize your range slider field

In your form, click the Slider field you want to edit. A set of options will display on the left.

The first boxes at the top of the slider options are the most important. They let you customize your slider to fit your needs.

• Field Label: Displays a title above the number slider so you can say what you're asking the user to select.
• Number Range: Lets you set the minimum and maximum values of your range slider.
• Step: Adjusts the default step as users move the slider. Depending on your calculator, you may want a slider that jumps by 5, 10, 100, or 1,000.
• CSS Layout Classes: Options for changing the width of your slider with CSS.

If you're using this as a price slider, be sure to check the box Format number as currency too.

For more ways to personalize the field, scroll down and open the Advanced settings.

Here, the Before Input and After Input fields let you add text before or after the numbers on the slider.

For example, if you want to show percentages, add % in the After Input box. Your users will then see 5%, 6%, etc. as they control the slider.

🎨 Want to change your slider's color? There are tons more customization options on the Formidable → Styles page. Just select the Slider Fields section to make your changes.

Once you've customized the options, click the Update button to save your changes. Preview it to see how it looks, then add the form to a page.

Congrats, you just created and customized a number range slider in WordPress! 👏

🚀 Ready to add a range slider to your WordPress form?

That was pretty easy, wasn't it? In just a few steps, you've created a custom slider that will not only make your calculator more mobile-friendly but also increase user interaction on your site. Not bad!

Formidable makes it simple to create interactive calculators, no matter how basic or complex. It isn't just a great price range slider WordPress plugin; it's also perfect for building calorie calculators, creating instant quotes, and making any online forms you can imagine.

You'll find loads of useful features, giving you the power to collect and display all kinds of data without touching a single line of code.

Ready to start creating forms and adding number range sliders? Get started with Formidable today!

 Create A Number Slider Now!

For more WordPress form tips and tricks, follow Formidable on Facebook, Twitter, and YouTube.