Range slider is a great way to get input from users in an easy way. They can be used for numeric or custom text values. It is a great alternative for text input fields when there is a defined set of maximum, minimum values.

Range Slider for WPForms lets you easily add range slider fields in your form. There are plenty of options to customize the range slider in a way so that it can fulfill your requirements. The range slider is fully compatible with mobile devices and supports touch input as well.

Range slider for WPForms

Requirements

• Booster for WPForms
• Range Slider for WPForms

Required plugins for Range Slider

Steps to Add Range Slider Field in WPForms

• Once you have installed ‘Range Slider for WPForms’ addon then open the form editor.
• Under Standard Fields, you will see a new field ‘Range Slider’. Add this to your form.

Range Slider field under Standard fields

Detailed Explanation of Standard Range Slider Settings

• Label: This is the label that will appear above the range slider field. It behaves similar to how other field labels behave in WPForm fields.
• Description: It appears above or beneath the range slider field depending on your settings.
• Required: If the field is marked as required then the form won’t submit unless the user selects a value.
• Use Custom steps: If you check this field then you can add custom steps in range slider. Consider you want to add Months of the year then you can add these values under ‘Custom Steps’ field. Custom steps should be comma-separated ( ex. January, February, March, etc )
• Start Value: This setting let you set the initial position of the range slider handler. It will work even if you use custom steps.
• Range Prefix/Postfix: These settings let you add a constant prefix or postfix in the values. Example if your custom values are Apple, Mango, Banana and you add a prefix of ‘I Like’ and postfix as ‘Fruit’ then the slider will show the values as I Like Apple Fruit, I Like Mango Fruit and I Like Banana Fruit.
• Fill Color: This setting lets you fill a color towards the left of the range slider in case of single range handle and between the handles if two range handles are enabled.
• Show Grid/Scale/Pips: If this option is enabled then it will show grids beneath the range slider.

Standard settings of slider field.

A detailed explanation of Advanced Range Slider Settings

• Enable Second Handle: Selecting this option will enable the second range slider handle.
• Start: Use this field to set the start value for the second range slider handle. This start value shouldn’t be less than the start value of the first handle.
• Joiner Text: Joiner text acts as a conjunction for the first and second handle values when saved in the database. Example if you are using ‘to’ as joiner text and the value of the first handle is 5 whereas the value of the second handle is 10. Then it will be saved as ‘5 to 10’ in the database.

If you have any questions or doubts regarding this then leave a comment below and I will get back to you.