Interactive sliding bar changing the content

Hi Guy,

I would like to create a special effect on my website but I can’t find any tutorial or hack about this special effect that I’m looking for.

It’s something I have seen on a few website, an horizontal bar with a trigger that we can from side to side, and the position of the button on the horizontal bar create an interaction in the content. Maybe easier to show a concrete example here.

On the example, it’s on the second half part of the page, it’s named ‘How many employees are in your organisation?’

I’m sure it’s doable on Webflow, but does someone here has ever seen such an animation and know how to achieve it?

I believe there should be a way to define a value to the beginning and the end of the horizontal bar, and then figures that adapt to the interaction are finally “just” the result of a calculation based on the number obtained by the variable. :thinking: :exploding_head:

If someone could help me with that I’m ready to reward USD150 :tada: :gift: and I don’t need any exclusivity so if it can serve the community it would be even better. :smiley:

Thanks for your help.

hi @asep when you check website sources in dev tools you will find that this website is done in WF and function plus formula for slider can be found. here is screenshot. Hope the helps.

1 Like

Hi @Stan , thanks so much that’s super helpful. I checked the code but didn’t find this one. Amazing to see that the website source is in WF. I found all the style infos so I will try to duplicate it and apply the code then. Should I copy the copy inside the head our before of my page? Thanks so much for your help!

@Stan I have tried on the link here but I can’t get how to get the tag ‘::before’ on my own. Any idea how to fix this by any chance?

Hi @asep the “before” tag is automatically add by the browser. Im not on comp now to check if there is some custom styling applied but I can check it later today or tomorrow.

@Stan that would be lovely, I believe I did everything as it was on the original website but it doesn’t work :thinking:

hi @asep the screenshot I have posted should only get you an idea how it was created and it can’t be solved only with copy pasting code. There will be more code involved to make it work. You need to use rangeSlider library to start with. You have link to jsDelivr in documentation. Hope this hint will help.

That’s very helpful @Stan ! I just found a video that explain how to make it happen. Gonna try and coming back to you with the result.

Youtube Tutorial

1 Like

Hi @asep while your link ma be a solution for you, here is the thing. If you would like to understand in deep how slider is working and how customise it you can read for example A Sliding Nightmare: Understanding the Range Input

After you can move to Slider style generator

and finally apply values to outputs by JS with a few lines of code.

There is many articles about how to if you spend 1 or 2 days to learn about sliders you will be able create what you need without any external library or services.


EDIT: I have created a simple example of range slider with logarithmic increase of employees number. Repo is on Github you can look into it how it can be done without external library or services. Still can be improved but… Feel free to customise it and and apply to WF. :wink:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.