A WordPress slider field lets users select a numerical value by dragging a handle. Unlike other fields, a slider always has a value — it's never empty. This means that even a value of 0 is considered a valid entry. When you set up a slider, you have two available options:
- A single slider has one handle that the user can drag to select a specific value.
- A range slider is perfect for when you need to define a minimum and maximum value. It includes two handles—one for the minimum value and one for the maximum value.
Upgrade your WordPress site with powerful, flexible forms.
Standard field options
The range slider field has the following standard options:
- Field Type
- Required
- Field Key
- CSS Layout Classes
- Label position
- Visibility
- Conditional logic
- Dynamic default value
From Idea to Reality in Minutes. Build Powerful Forms, Dashboards, Apps and More.
Formidable Forms makes advanced site building simple. Launch forms, directories, dashboards, and custom WordPress apps faster than ever before.
Field-specific options
In addition to the standard field options, a number slider field has a few field-specific options.
Number slider range
Set the number range for your slider field. A minimum number of 0, maximum number of 100 and step number of 1 is set by default.
Custom Format
Select this option if you need a specific custom format. You can enter the format you want in the field next to it.
When you turn on the Pro version, you can use the input mask, which is a premium feature. If the input mask has a value, choose this format for existing forms. For more help, check the guide on customizing the format with an input mask.
Currency Format
Show the number in the field as currency. It will follow the currency format set in Formidable → Global Settings by default. This format includes two decimal places and a currency symbol. Additionally, you can customize the thousand separator, decimal separator, and number of decimal places and choose your preferred currency symbol.
When you type in a field, the currency formatting will be applied immediately. For example, if a user types This item will cost 5000 it will appear as This item will cost $5,000.00.
Value Position
The value position provides six position/alignment options: Top left, Top center, Top right, Bottom left, Bottom center, and Bottom right.
Show range on slider
Select this checkbox to display the range (minimum and maximum values) when enabled.
Gap Range
Set the gap values after selecting Range as the slider field type. A minimum number of 10 and a maximum number of 100 are set by default.
Field styling
To customize the number range slider, go to your Visual Form Styler and scroll down to the 
- Color: Set the border color of the slider handle.
- Bar color: Set the color of the slider bar.
- Font size: Set the font size of the range value.
- Track height: Set the height of the slider bar.
- Circle size: Set the size of the slider handle.
Display Number Slider field
You can display the range slider field value in a form's confirmation message, email, or View.
- Display value: Display the value submitted in a slider field.
[x]
Replace x with the ID or key of the slider field.
- Display the minimum value: Use the show shortcode option to display the minimum value of a range slider.
[x show="min"]
Replace x with the ID or key of the range slider field type.
- Display the maximum value: Use the show shortcode option to display the maximum value of a range slider.
[x show="max"]
Replace x with the ID or key of the range slider field type.
How to add a range slider
Creating a form with a range slider field makes it easy for users to select a range of values, such as a price budget range or an age range. Users can quickly see the lowest and highest values and adjust the range with a simple drag instead of typing numbers. Follow the step-by-step guide below to get started.
- Create a new form. First, you need to create a new form. This is where you will build your form and add the slider field.
- Choose the type of slider. A pop-up for slider field types will appear that includes two options: single and range. Choose the range slider type and add it to your form. This is the main part you will use to create the range selector.
- Configure the slider settings. Once you have added the range slider, select the field options to set the lowest and highest values for the number range and the gap range. By choosing a format, you can also add a prefix (like a dollar sign "$") or a suffix (like "per hour") to show more information.
Common examples for range sliders
Range sliders are great because they give users a simple way to choose a range of values. They are most useful when someone needs to pick a value from a long list of numbers, but doesn't need to be exact. Below are some examples of how they can be used.
- Budget range. Set your desired budget price range for purchasing a house on a Real estate listing form.
- Hourly rate. Set your range for expected salary in a job application form.
- Age range. Set a filter in your search for friends within a certain age bracket for a dating application form.
