### [Using the Number Slider Field](https://wpforms.com/docs/how-to-add-a-number-slider-field-to-wpforms/)

**Published:** November 29, 2023
**Author:** Umair Majeed

**Excerpt:** Learn how to let visitors pick a number by dragging a slider.

**Content:**

Would you like to add a Number Slider to 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.

This tutorial will show you how to use the Number Slider field in WPForms.

- [Adding a Number Slider Field to Your Form](#add-slider)
- [Configuring Number Slider Field Options](#field-options)
- [Configuring Number Slider Advanced Options](#advanced-options)
- [Configuring Conditional Logic](#conditional-logic)

Please enable JavaScript in your browser to complete this form.

##### Try this Form Demo!

How many people will be in your party? Selected Value: **5**

At this time, we cannot host parties larger than 20 people. We apologize for any inconvenience.

**Note:** A 20% gratuity will automatically be added to your bill for parties over 10..

Submit![Loading](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 Explore our [Personal Budget Planner Form Template](https://wpforms.com/templates/personal-budget-planner-form-template/) to see a more practical use case of the Number Slider field.

---

Before you jump in, you’ll first need to make sure WPForms is [installed and activated](https://wpforms.com/docs/install-wpforms-plugin/ "How to Install the WPForms Plugins") on your WordPress site and that you’ve [verified your license](https://wpforms.com/docs/verify-wpforms-license/ "How to Verify Your WPForms License"). Then you can [create a new form](https://wpforms.com/docs/creating-first-form/ "How to Create Your First Form") or edit an existing one to access the form builder.

## Adding a Number Slider Field to Your Form

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

![Adding a Number Slider field to a form](https://wpforms.com/wp-content/uploads/2020/06/add-number-slider.gif)## Configuring Number Slider Field Options

Once you’ve added the field to your form, click on it in the preview area to open its Field Options panel. Below, we’ll go through each setting that’s available here, using a restaurant reservation form as an example.

![The field options for the Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-field-options.png)### Label and Description

In the Number Slider field options, you can customize its label and description. The label will default to read “Number Slider,” but you can change this to whatever you’d like.

For our restaurant reservation example, we’ll change the label to, “How many people will be in your party?”

![Editing the label for a Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-label.png)The field description gives you an opportunity to [add extra text to your form](https://wpforms.com/docs/how-to-add-extra-text-and-descriptions-to-forms/ "How to Add Extra Text and Descriptions to Forms"), such as instructions on how to use the number slider. You can enter whatever text you like in the field provided.

![Adding a description to a Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-description.png)### Minimum and Maximum Values

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

For our example, we’ll set the minimum to 1 person and the maximum to 20 people.

![Changing the Number Slider values](https://wpforms.com/wp-content/uploads/2020/06/number-slider-value.png)## Configuring Number Slider Advanced Options

You can customize the field size, default value, and increment value in the **Advanced** tab of the field options panel. Click on it in the form builder to access these additional settings.

![Opening the advanced options for a Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-advanced-options.png)### Field Size

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

![Selecting the field size for a Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-field-size.png)Below are examples of what each field size will look like on the frontend of your site:

![Small, medium, and large Number Sliders](https://wpforms.com/wp-content/uploads/2020/06/number-slider-field-size-example-1.png "Small, medium, and large Number Sliders")### Default Value

The Default Value determines where the slider will be set when users open your form. It will automatically be set to the minimum value you choose in the field options.

However, you can adjust it to any whole number within your number slider’s range by entering your desired value in the **Default Value** field.

![Setting the default value for a Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-default-value.png)**Note:** For more details on setting default values for your forms’ fields, check out our [full tutorial on this option](https://wpforms.com/docs/how-to-add-default-values-for-form-fields/).

### Value Display

By default, the label beneath your slider will read, “Selected Value: {value}.” The {value} tag pulls the number that is currently selected by the user so they can check that it’s correct.

You can change what the label reads under **Value Display**.

![Editing the Number Slider field value display](https://wpforms.com/wp-content/uploads/2020/06/number-slider-value-display.png)However, we recommend leaving the {value} tag in place so users can confirm their selection.

**Note:** Want to let users review all of the information they’ve entered in your form before they submit it? Check out our tutorial on [showing entry previews in WPForms](https://wpforms.com/docs/how-to-show-entry-previews-in-wpforms/) for all the details.

### Increment

This setting determines the step size for each increase in the slider’s position. For example, if you had this setting set to 2, each increase would add 2 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.

![Setting the increment for a Number Slider field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-increment.png)**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.

## Configuring Conditional Logic

If you’d like, you can also show users who select a particular value a message using [conditional logic](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/ "How to Use Conditional Logic with WPForms").

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

To set this up, we’ll first add an [HTML field](https://wpforms.com/docs/how-to-use-the-html-field-in-wpforms/ "How to Use the HTML Field in WPForms") to our form with the text “**Note:** A 20% gratuity will automatically be added to your bill for parties over 10.”

![Adding text to an HTML field](https://wpforms.com/wp-content/uploads/2020/06/number-slider-html-field-example.png)Next, we’ll set up conditional logic so that this HTML field only appears if a user chooses a number greater than 10 using the number slider. To do this, click the **Smart Logic** tab in the Field Options panel for the HTML field and toggle on the setting to **Enable Conditional Logic**.

![Enabling conditional logic for an HTML field](https://wpforms.com/wp-content/uploads/2020/06/html-field-enable-conditional-logic.png)Then set the rule that determines 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.**“

![Creating a conditional logic rule to show an HTML based on users' selections from a number slider](https://wpforms.com/wp-content/uploads/2020/06/number-slider-conditional-logic-rule-example.png)**Note:** Need help setting up your conditional logic rule? Our beginner’s tutorial on [using conditional logic in WPForms](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/) has all the details.

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

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](https://wpforms.com/docs/how-to-install-and-use-the-surveys-and-polls-addon/ "How to Install and Use the Surveys and Polls Addon") for details on how to view entry statistics, generate reports, and more.

**Categories:** Fields, Field Types

---