How to Add a Price Range Selector to your Webflow Form

February 9, 2024
Try Memberstack for Free!


Add memberships to your Webflow project in minutes.

Try Memberstack

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Try Memberstack

This post will teach you how to add a price range selector to your webflow form, what a price range selector feature is and when/why you might want to use a price range selector in your project.

How to Add a Price Range Selector to your Webflow Form

Memberscripts needed:



Why/When would need to Add a Price Range Selector to your Webflow Form?

  1. Provide a user-friendly way for users to choose a price range if you’re selling products or services.

If you’re building a website where you sell products or services, chances are price ranges are a part of your business.

Instead of using boring standard text inputs, you can offer users an easier way to select price ranges by using a range selector.

We’re going to see how you can do just that, and if you’re not selling anything, you can edit the range selector we’re building to fit any needs you have.

Adding a price range selector to Webflow forms

To add a price range selector to a Webflow form, we’re going to use MemberScript #58 – Price Range Slider Inputs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is build out the form itself and style it however you want.

Then, go ahead and add a regular text input field which you won’t need to style because it’ll just be replaced by the slider. Then add the following attribute to it:

  • ms-code-input=”range-slider”

Now add another two text input fields for the manual “from” and “to” values, which you can style as you see fit. Add the following attributes accordingly:

  • ms-code-input=”price-from”
  • ms-code-input=”price-to”

Making it work

Now that you’ve got the form set up and you’ve added the required fields, all you need to do is add the MemberScript #58 custom code to your page, before the closing body tag.

Here are a few things you can change in the custom code:

  • The default range values – to edit the default range values, simply change the values for var defaultFrom and var defaultTo.
  • The slider shape – to change the shape from the default circle (“round”) you can change the value of skin to flat, big, modern, sharp, or square.
  • The minimum and maximum values – to edit these, simply edit the values of min and max.
  • The prefix – if you’re using another currency or simply want to remove the prefix altogether, either replace the prefix value with your symbol of choice or delete the line entirely.


That’s everything, you can now go ahead and test your form’s range selector feature.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add a price range selector to your Webflow forms.

Take me to the Script!