Number Slider

The WordPress range slider field allows users to drag a handle to select a number from a defined range of numbers.

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

Field-specific options

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

Number 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.

Field styling

Some range slider styling is available in Formidable → Styles → Edit Styles → Slider Fields.

To learn more about styling your form, see the visual form styler page.

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.

Customizations

Add currency symbol

In Formidable → Styles → Custom CSS, add the following example to allow you to add a currency symbol for each of your range slider fields. Change 251, 252, 253 to the field ID and change £, $, € to your preferred currency.

#frm_field_251_container .frm_range_value:before {
   content: "£";
   margin-right: 2px;
}

#frm_field_252_container .frm_range_value:before {
   content: "$";
   margin-right: 4px;
}

#frm_field_253_container .frm_range_value:before {
   content: "€";
   margin-right: 4px;
}

Format as a currency with commas

If you would like to format the value displayed below a range slider field as a currency, separated by commas, see this Javascript example. Note that this is not set up to work with multiple number sliders on a page.