How to create a budget range slider in Webflow?

Hello Webflow Community,

I’m currently developing a website using Webflow and I’m working on the quote request section. I want to include a budget selection feature that involves a straight line slider ranging from 0 to €100,000 with two handles to indicate the budget range.

Does anyone know if there’s a library within Webflow that can facilitate this, or perhaps a free external site or specific code that needs to be implemented to achieve this functionality?

I’m looking for tips or recommendations for libraries, coding practices, or alternative solutions that integrate well with Webflow to create a dual-handle range slider.

Thank you in advance for your help!

hi @Sabine_TAIEB check Finsweet as they may have solution for you.

Thank you @Stan for the recommendation! Finsweet seems to offer exactly what I need. However, I’m having trouble converting the currency from dollars to euros. Do you have any suggestions or tips on how to solve this issue?

hi @Sabine_TAIEB there are two ways.

  1. hardcoded exchange rate value and simple JS function to calculate a new value
  2. use API like https://exchangeratesapi.io or similar that offers multiple currencies.

Here is how it can be done, all you have to do is to find the way to apply it in your project.

Your choice