Documentation

All the information you need in one place

How to Use the Number Slider Field in Nelio Forms

The number slider field in a form is the designated field for users to to easily click and drag a selector to choose a value on a number line, whether it is their age, the number of sites, or any other number you want them to fill in.

In this entry, we’ll show you all the options available for the number slider field with Nelio Forms.

Table of Contents

Adding a Number Slider Field to Your Form

When creating a new form or editing an existing one, adding an additional number slider field is as easy as adding a new Number slider field block in the block editor. You can use the Block Inserter + icon, or a shortcut slash command or use the More options on any of the block’s toolbar to insert a block.

Adding a number slider field to a form
Adding a number slider field to a form.

You may change its descriptive label (the default label is “Number slider”) and you have the option to have this label displayed or not on the form. You can also set a default value to display by clicking the selector to the right of the field.

Editing number slider field
Editing number slider field.

Note that if you don’t set any initial value, the initial position shown in the slider will be in the middle of the slider. If you set to display an initial value, the slider will be initially positioned where that value corresponds between the minimum and maximum range set.

Below, there is an example of two number sliders included in the form to request a customized price for Nelio A/B Testing.

Example of two number sliders in a form
Example of two number sliders in a form.

Number Slider Field Settings

In the sidebar, you can set the the following number slider field properties:

  • Set the minimum and maximum values that a user can select with the slider. The default values are from 0 to 100, but you can replace these with whatever whole numbers you’d like
  • Set the step size for the ascending and descending selector. By default, the value is 1. For example, if you had this setting set to 10, each increase would add 10 to the displayed value.
  • Set if a custom unit must be display before or after the value shown at the right of the slider. For example, if the user must select a price, you may want to add the $ before the value.
  • Set whether the field must be filled in the form to be submitted,
  • Set whether the field label should be shown or hidden.
Number slider field settings
Number slider field settings.

Moreover, as any other block, you can add additional CSS classes to change the styling of the block.