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.

Unit

If you'd like to include a unit along with the number selected in the slider, add it here. For example, add 'Years' for the unit, and you will see '20 Years' beneath the slider when 20 is selected.

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.

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