How to Create a Range Slider Field in Divi Form Builder

Divi Form Builder doesn’t come with a range field. But with a little JavaScript magic, you can turn a number field into a Range Slider.

For this example, I am making an Area field. We will need 2 fields:

1. A Content field to display the selected value.
2. A Number input field.

Follow the steps below and customize it according to your requirements.

Step 1: Start by creating a Content field:

1. Add a field in your Form module
2. Set a unique Field ID and note it down. For my example, I am using the ID sq_feet_value_placeholder
3. Change the Type to Content
4. Change the Content Type to Code keep things clean
   

Step 2: Create the Number field.

This will be transformed into the range slider using our JS.

1. Add another field
2. Set the Field ID for this field and note it down. Make sure it’s unique and doesn’t have any spaces. I’m using area_feet for my example.
3. Set the Type to Number Input Field.
4. Add the Minimum and Maximum values for the field.
5. Additionally, you can also set a Number Increase Step Value.
   

Step 3: Add the code

Now we need to add the JavaScript:

1. Start by adding a code module. Make sure it is placed after the form and not before.
2. Add the following code in the module. Change it according to the field IDs.

            
const sq_feet_input = document.getElementById(‘de_fb_area_feet’); // change area_feet to the number field ID

let sq_feet_value_output = document.getElementById(‘de_fb_sq_feet_value_placeholder_wrapper’); // change sq_feet_value_placeholder to the content field ID.

const value_suffix = ‘ Sq feet’ // change Sq feet to whatever suffix you want, or make it blank but don’t remove the line’


sq_feet_input.type = ‘range’;

sq_feet_value_output.textContent = sq_feet_input.value + value_suffix; 

sq_feet_input.addEventListener(‘input’, function() {
    sq_feet_value_output.textContent = this.value + value_suffix;
});

        

Don’t forget to change the values above according to your field IDs.

Step 4: Add the CSS:

Now you need to add some CSS to make the range slider properly visible. You can add it either in Divi > Theme Options > Custom CSS, Page CSS, or inside Free-Form CSS inside the Form module itself:

            
.de_fb_form input[type=range] {
    appearance: auto;
}

        

That’s it! Now you should have a working range slider like this:

Conclusion

There you go! That is all there is to it to add a range slider to your Divi Form Builder forms. Divi Form Builder is by far the best and easiest way to create amazing forms in the Divi Theme, so be sure to check it out!