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.

Standard field options

The range slider field has the following standard options. The four images below show the options of one range slider, from the top of the panel to the bottom. Some of them are in the Advanced section, so click Advanced to show them. Gap Range and the Start Value and End Value boxes appear only on a range slider. A single slider has one Default Value box instead.

• Field Type
• Required
• Field Key
• CSS Layout Classes
• Label position
• Visibility
• Conditional logic
• Dynamic default value
• Before & After Input

Field-specific options

In addition to the standard field options, a number slider field has a few field-specific options.

Number slider range

Under Number Range, set the lowest and highest numbers on the slider in the Min Value and Max Value boxes. In the Step box, set how much the value changes with each move of a handle. By default, Min Value is 0, Max Value is 100, and Step is 1.

Custom format

The Format dropdown is set to None by default. To set your own number format, select Custom in the Format dropdown.

Then set the thousand separator, decimal separator, and number of decimals. To add a symbol before or after the number, use the Left symbol and Right symbol boxes.

Currency format

To show the number on the slider as currency, select Currency in the Format dropdown. It follows the currency format set in Formidable → Global Settings by default. This format includes two decimal places and a currency symbol.

To use a different format, uncheck Use Global Currency Settings. Then set the separators in the Thousand and Decimal boxes, and choose 0 or 2 in the Decimals dropdown. Next, enter the currency symbol in the Left symbol or Right symbol box. For example, with the default US format, a slider value of 5000 appears as $5,000.00.

Value position

In the Value Position dropdown, choose where the selected value shows next to the slider: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, or Bottom Right. The value shows at Bottom Center by default.

Show range on slider

To show the minimum and maximum values at the ends of the slider, check the Show range on slider box. This box is unchecked by default.

Gap range

On a range slider, the Gap Range option sets the smallest and largest distance between the 2 handles. Enter them in the Min Gap and Max Gap boxes. By default, Min Gap is 10 and Max Gap is 100.

Field styling

Customize the number range slider in the Visual Form Styler. Open your form and click the Style tab (1). Click Edit style at the bottom of the form preview (2).

The style opens on its Quick Settings. Scroll to the bottom of the settings and click Show advanced settings.

Then open the Slider Fields section and change these settings. When you're done, click Update at the top right of the page to save the style.

• Color: Set the color of the slider handle border and the filled part of the bar.
• Bar Color: Set the color of the unfilled part of the 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.

1. Create a new form. First, create a new form. This is where you will build your form and add the slider field.
2. Choose the type of slider. In the Add Fields panel of the form builder, click Slider. A popup appears with two slider types: Single and Range. Choose Range to add a range slider to your form. This is the main part you will use to create the range selector.
   

   

3. Configure the slider settings. Click the range slider in your form to open its field options. Then set these options:
   1. Under Number Range, set the lowest and highest values in Min Value and Max Value. Step is how much the value changes with each move.
   2. Under Gap Range, set the smallest and largest distance allowed between the two handles. Max Gap stays at 100 when you change Max Value, so set Max Gap before Min Gap. For example, for a budget from 0 to 1,000,000, set Max Gap to 1000000 first and then Min Gap to 10000. Min Gap can't be greater than Max Gap, and Max Gap can't be greater than the difference between Max Value and Min Value.
      

      

   3. Choose a Format. Currency uses your global currency settings. Custom lets you set your own number format: the Thousand separator, the Decimal separator, and the number of Decimals.
   4. With the Custom format, add a prefix (like a dollar sign "$") in Left symbol or a suffix (like "/hour") in Right symbol.
      

      

4. Save the form. Click Update to save your changes. On a new form, this button is Save.

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.

  

Move range slider handles with the keyboard

Visitors can move the handles of a range slider with the keyboard as well as by dragging. Press Tab to move to the minimum or maximum handle, then use these keys:

• Right arrow or Up arrow: Move the handle up one step.
• Left arrow or Down arrow: Move the handle down one step.
• Page Up or Page Down: Move the handle ten steps at a time.
• Home or End: Move the handle to the lowest or the highest value it can reach.

The handles keep the gap range you set. If a move goes past it, then the other handle moves along with it. Screen readers announce each handle as the minimum or maximum value, with its current value.