The WordPress range slider field allows users to drag a handle to select a number from a defined range of numbers. The slider fields always have a value, so it isn't empty. i.e. even 0 is considered a non-empty value.
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 slider 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.
Custom Format
Select this option if you need a specific custom format. You can enter the format you want in the field next to it.
When you turn on the Pro version, you can use the input mask, which is a premium feature. If the input mask has a value, choose this format for existing forms. For more help, check the guide on customizing the format with an input mask.
Currency Format
Show the number in the field as currency. It will follow the currency format set in Formidable → Global Settings by default. This format includes two decimal places and a currency symbol. Additionally, you can customize the thousand separator, decimal separator, and number of decimal places and choose your preferred currency symbol.
When you type in a field, the currency formatting will be applied immediately. For example, if a user types This item will cost 5000 it will appear as This item will cost $5,000.00.
Before & After Input
Use this field option to include a unit beside the number selected in the slider.
For example, add 'Years' for the After Input setting, and you will see '20 Years' above the slider when 20 is selected. When one of these options is set, the minimum and maximum values for the entered range will show beneath the range slider.
Field styling
To customize the number range slider, go to your Visual Form Styler and scroll down to the
- Color: Set the border color of the slider handle.
- Bar color: Set the color of the slider 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.
