Back to Blog

How to Add a Custom Range Slider to a Form

Tutorials
January 11, 2022

Add a customizable range slider to your forms...

{{ Template "copy-button" "id:extension-range-slider" }}

Overview 📚

This guide gives you a quick overview on how you can add a custom range slider into your Webflow forms.


To add this into your project, follow these simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:<head> code" "id:35b47102c7892d3b5d3f92ef81c779a2" }}
{{ Template "gist" "text:<body> code" "id:6833913abb30d4771cae3dbcf127f4e2" }}

Instructions ✍️

1. Add a form block and select the input field

Add your form block and input field to the page. We will be adding unique IDs to the input field in order to connect with our range slider. You can find the ID at the top of your text field settings panel.

To use the Single Range Slider, add the ID
#slider-single


To use the Full Range Slider, add the ID
#slider-range

2. Add the Range Slider #ID

To turn your input field into the range slider, simply add the ID to the text field as shown below.

3. Add the custom code to your custom code area
{{ Template "gist" "text:<head> code" "id:35b47102c7892d3b5d3f92ef81c779a2" }}
{{ Template "gist" "text:<body> code" "id:6833913abb30d4771cae3dbcf127f4e2" }}
4. Edit your range settings.

We've included some basic settings, such as the range, where it should start, the steps plus more. You can also add a prefix like a $ or other currency codes. Take your time to review the script and experiment with changes as required!

5. Publish your site and test

To check everything is in order, publish your page and view the live link.

OTHER BLOG ARTICLES

Check out some other articles!

Join Over 55,000+
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 55,000+ other creators across our communities.