For the people like me who are still learning and like to figure out stuff.
I have figured out simple steps how to get a range slider working on a webflow website
When you click on this link there are several examples:
If you click on one of the “try it yourself”- buttons a new screen opens.
For example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider
On the left you see the code, on the right you see the visual result if you press run.
You can alter parameters on the left and see how it turns out.
If you paste the complete code into a embed custom code component and then you’ll have a range slider!
(The custom code componennt is in the dropdown-menu all the way down, where also the navbar-component is located)
You can put it in a container to make it less wide (or change the width parameter)
You can put a text in front of it etc.
Oh and when you have figured this one out: take a look at the other options on this page on the left menu like:
countdown timer https://www.w3schools.com/howto/howto_js_countdown.asp
animated icons https://www.w3schools.com/howto/howto_js_animate_icons.asp
star rating https://www.w3schools.com/howto/howto_css_star_rating.asp
Good luck and have fun playing around with these options!
Go to edit page settings in the webflowpage and scroll all the way down.
Paste this code into the before body tag:
$( "#slider" ).slider();
Now make a div.
And give the div an ID named slider
The Id field you’ll find in the designer on top right of the screen under elements settings (the clogwheel)
Take a look at the code you pasted. You’ll see it says slider with a punctuation point in front of it. You can change the name of it in the code in whatever you like and change the name of the id according to also.
Give the div a certain height or widht etc.