A Range Slider is a powerful form element that allows users to select a numeric value or a value within a defined range using a draggable slider.
Why use Range Slider
Using a range slider, you can eliminate problems like typos, out-of-range inputs, formatting errors and more due to typing numeric values manually. This makes your forms more user-friendly and error-free. With Cool FormKit, adding a range slider to your Elementor forms is easy and requires no coding.
Follow these simple steps to add a range slider to Elementor forms:
Add Range Slider
- Firstly, make sure you have “Turned on” the Rating Field feature in the WordPress Admin Panel → Elementor → Cool FormKit → Form Elements Tab.
- Navigate to the Content section of your Form Field.
- From the Field Type dropdown, select Range Slider.
Customization
Once you’ve selected the Range Slider field, you can customize its behavior and appearance using the following options:
- Min & Max Value: Set the minimum and maximum range for your slider.
- Step: Specify the intervals at which the slider value increases or decreases as the handle is dragged (e.g., 1, 5, 10).
- Start From: Set a default value to define the initial position of the slider handle when the form loads.
- Styles: Choose from available style options to change the visual appearance of the slider.
- Before / After: Add a prefix or suffix to your slider values (e.g., $, %, kg) to display before or after the current value, min, and max indicators.