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.