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.
Before & After Input
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 After Input setting, and you will see '20 Years' beneath the slider when 20 is selected.
When one of these options is set, the minimum and maximum values for your range will show beneath the range slider.
Add currency symbol
Add a dollar, pound, euro, or whatever currency you would like. Add your currency symbol either in the Before Input or After Input setting.
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
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.