How to Create a Range Slider in Webflow!

Prepare to enter the multiverse and learn some Webflow! To celebrate the release of “Spider-Man: No Way Home”, I built a range slider to display the user’s level of excitement for the movie. It’s all done using the Finsweet Attribute Library. 🕷️🕸️
Webflow Cloneable Project Preview
webflow.com/website/Spider-Ma...
Finsweet Range Slider Library
www.finsweet.com/attributes/r...
Finsweet Filter Library
www.finsweet.com/attributes/c...
Webflow Profile:
webflow.com/cullenkuch
Portfolio Website:
www.cullenkuch.com/
Feel free to like, subscribe and let me know your favorite movie in the comments below!
😁🎬🖥

[@AmitGupta-kg4eq]

Thanks a lot Cullen for this great tutorial

[@CullenKuch]

My pleasure Amit, glad you enjoyed it!

[@marcusachberger]

Thx so so much

[@CullenKuch]

You're welcome Marcus, glad it helped!

[@momosch7656]

I mean. You deserve more subscribers :). I might not align with you design whise. Your implementation of 'code' is a real game changer :)! You helped me out many times! Thanks for the effort you put in to these videos! And i hope you keep on spreading the awesomeness. Thanks Cullen!

[@CullenKuch]

Thanks so much Mo! I'll do my best 😆

[@jenniferbartu]

I have been working on getting my filter to work all day and FinSweet doesn't really have a tutorial showing how to link a slider (just how to build). So thanks to your amazing tutorial I was able to locate my mistake and now it is working! Thank you!

[@CullenKuch]

So glad to hear that Jennifer!! 😁

[@HarshitAgrawalOfficial]

Love it!

[@CullenKuch]

Thanks Harshit!

[@Rassolov_Webflow]

Range slider does not work if you use range slider in a standard webflow slider, it simply does not work, the interesting thing is that if the range slider is located on the first slide, then it works, but when it is located on the second slide or third, etc. then it just doesn't work. It’s a pity, after googling the problem I found several requests with a similar problem that remained unresolved, I hope someday they will fix it, and it’s a pity that I won’t have to use the finsweet product. bad experience

[@nicke7637]

Thanks for the easy to follow tutorial! Doing this range slider was my first big thing I managed to complete on webflow. I just have one question, there's this thing that happens on my page where all the elements do this ugly blink when the range updates... Is there a way to stop this blinking issue?

[@CullenKuch]

Hey Nick, I notice that happens with mine as well. Not sure there is a way around that, looks like the CMS collection is being refreshed when filtered?

[@nicke7637]

@@CullenKuch Yeah that probably seems to be it. The more I investigate this the more it looks like some sort of refresh animation... So maybe if that animation is turned off it won't do the blinking thing anymore. I'll see if there's a way to turn off that animation... Ah ok I found a solution, there was an option to change the animation for the list updating in the cms filter documentation, but to remove the animations the duration of the animation needs to be set to 0. Sweet! The range slider works how I wanted it to. Thanks again for the great tutorial!

[@CullenKuch]

@@nicke7637 Oh great! That's right, they have additional settings in their docs. Nice work 😎👏

[@alexm.6969]

I wonder how this works if the CMS items are alphabetic and not numeric. And also if you could create an alphabetical range slider.

[@CullenKuch]

Hey Alex, I just tested this and it works! Just make sure the CMS field is plain text and then in the Collection List settings you can filter by plain text field Alphabetical (A-Z) 😄👍

[@faizaaftab9813]

Hi .. you teach so well.. can you help me please ..it is not working for 5th slider .. can u help it please

[@CullenKuch]

Thanks so much Faiza. Do you mean just the 5th CMS item is not being filtered? Maybe double check the attributes are applied, no typos...

[@SahilSahil-mn1hk]

My range slider and filter only works when the slider is moved, but on page load, it has start value but doesn't filter as per slider value

[@CullenKuch]

Hey there, it seems there is an option in the Finsweet filter attribute called “show query” that might help with this. 1. Target your collection list element where the finsweet list attribute is applied, then add another attribute “fs-cmsfilter-showquery” with a value of “true”. 2. Publish your site and pick a value on your slider. You will see it now has a url specific to that filter value. 3. Copy that url and use that as a link to wherever you want the user to land where the collection is already filter to that value. Hope that helps!

[@luckymastermind5465]

How would I go about starting the fill from the center and filling outwards toward the min or max depending on the handle drag direction?

[@CullenKuch]

If you target the handles and change their "fs-rangeslider-start" values to the middle of your track this should give the effect you're looking for. So for the Spider-Man track which only goes from 0-11, I would set the first handle start to 5 and the second handle start to 6. Then everything will grow out from there. Hope that helps!

[@liamlegaillard9840]

I make exactly like you but my filter d'ont work can i have some help ?

[@CullenKuch]

Hey Liam, I'd need a link to your project to see where the issue lies.