How to Add a Number Slider Field to WPForms

Would you like to a Number Slider into your WordPress forms? A Number Slider field allows your users to easily click and drag a selector to choose a value on a number line. In this tutorial, we’ll show you how to use the Number Slider field in WPForms.


Adding a Number Slider Field

Before we get started, you’ll need to create a new form or edit an existing form.

After opening the form builder, you can look under the Standard Fields to find the Number Slider option. Simply click the field to add it to the form, or drag and drop it into your form’s preview area.

Once the field is added, you can click on it to open its Field Options panel.

Add a number slider field in WPForms

Label and Description

Within the Field Options, you can customize the field’s label and description. The label will default to read Number Slider, but you can change this to whatever you’d like.

For this example, we’ll create a restaurant reservation form. To fit this, we’ll also change the label to “How many people will be in your party?”

Number Slider Label Option in WPForms

Minimum and Maximum Values

You can also customize the minimum and maximum values that a user can select under the Value settings. These values will default from 0 to 10, but you can replace those with whatever numbers you’d like.

For our example, we’ll set the maximum to 20 people.

Number Slider Value in WPForms

Configuring Advanced Options

You can customize the field size, default value, and increment value under Advanced Options.

Advanced Options in WPForms

Field Size

By default, the Field Size is set to Medium. However, you have the option to set your slider’s length to Small, Medium, or Large.

Field size options in WPForms

Below are examples of what each field size looks like on the front end of your site:

Number Slider Sizes in WPForms

Default Value

By default, this value will be set to the minimum value you choose. However, you can adjust this to any whole number by replacing it in the Default Value field.

Default Value Settings in WPForms

Value Display

By default, the label beneath your slider will read Selected Value: {value} and will insert the value that is currently selected by the user. However, you can change what the label reads under Value Display.

Value display options in WPForms

Increment

This setting determines the step size for each increase in the slider’s position. For example, if you had this setting set at 2, each increase would add two to the selected value (0, 2, 4, 6, etc.).

By default, the increment value will be set to 1. However, you can edit this to any whole number you’d like under the Increment setting.

Note: If you choose to increment your value by an even number, but your max value is odd (or vice versa), the number slider will stop at the number before your max value.

Increment Option in WPForms

Configuring Conditional Logic

If you’d like, you can also show users that select a particular value a message using conditional logic.

For our restaurant reservation example, we’ll show a message to users who indicate their party will be greater than 10. In our message, we’ll let them know that an automatic 20% gratuity will be added to their bill.

To set this up, we’ll first add an HTML field. Then, we’ll add in the text “Note: A 20% gratuity will automatically be added to your bill for parties over 10.”

HTML code block in WPForms

Next, we need to set up conditional logic so that this field only appears if the user chooses a number greater than 10. To do this, click the Conditional Logic section to open it and then check the box for Enable Conditional Logic.

Now you can set rules that determine when the field will appear. For this example, we’ll set the logic to read: “Show this field if How many people will be in your party is greater than 10 “.

Conditional Logic for Number Slider field in WPForms

This field will remain hidden unless the user selects a value greater than 10 in the Number Slider field.

Gratuity notice with WPForms Number Slider

That’s it! You can now add and customize a Number Slider field for any of your forms.

Next, would you like to learn how to analyze the data you’ve collected? Be sure to check out our tutorial on the Surveys and Polls addon to learn how to view entry statistics, generate reports, and more.