Creating a Dynamic Range Slider with Images in Webflow (Design + Dev)

[Music] hey welcome to my channel again where we make things in webflow and hope they turn out good my name is casey catalpas i am a freelance web designer and developer and current winner of the studio called caseycrack creative where we do web design and development primarily with no code tools like webflow and i had a client reach out to me recently and they were like hey can you make a thing where if you like take a slider and you move it it'll show you like a certain amount of things it was for a charity thing like if you donate this amount you'll have this amount of outcome and i thought that was a really good idea and i've seen it i feel like on the internet but i didn't see any like cloneables and blood flow or any way how to do it easily on the internet so i thought that we would make something like that today i don't know really what the correct type of name for this kind of thing would be i guess it would be like a dynamic range slider but with like visual output too maybe that's what we'll call it i don't know i do sort of have a prototype for this built but i don't have it designed out at all so i figured i would just do this on camera and that would be kind of a fun exercise for us to do uh this is just a fake client this isn't real the client that reached out about that the project didn't get picked up but i was like hey that either way that should probably exist somewhere in the webflow community somewhere so i thought i would make that and that's what we're gonna do today so i'm gonna show you kind of what i've been thinking about so far here is it gonna open is it gonna open there we go baby so here in figma this isn't exactly a wireframe i started designing it and then i got tired so this is like a high fidelity mock-up um but i do want to design it out a little more but to give you a sense of functionality you would sort of get to this landing page and you would drag this little slider and then if it's five dollars it helps one student get a certain amount of supplies if it's ten dollars it goes to two and so that math just keeps applying the more you drag this little slider across so i thought you know it's a good way to kind of give people a sense of how many people they're helping for their dollar and maybe this calculation could apply to other things too um but i kind of base this off of the charity donors choose here in the us which helps directly fund teachers in classrooms so i thought that might be a fun little plug here so i'll make this donate button go to to donor's choose i knew that for this project we are gonna have to have a range slider and connect that range slider to some sort of output here with um some kind of image and to do that we'll need to do some javascript which i have already done um sorry i didn't record that bit but it did take a while for me to figure it out because i'm not like inherently a code person thus the no code situation but um i'll show you kind of how that works out here this is what it looks like in webflow right now i literally grabbed this slider from w3.com just the html in bed for a slider um so that's all that is here for for that piece yeah so this is the range slider itself um and then w3 had some extra css that you could put in to to style it so this is kind of where i will be styling the thing itself i would like to put a little image on it to drag it across but we can we'll see if i can figure that out because i don't know if i can and so for each of these little elements they have ids attached to them so that i can target them in the javascript so if you look at this html embed the id is my range on this one if you check here it's output but the class is important there also this little guy right here that changes has an id too so that number can change as we adjust the slider and then that number can be read to adjust the number of images all that to say that if i go to here and you are in this page it automatically is at five um one is automatically shown but when you adjust it it changes to the dollar amount to the number of little students here and if i drag it all the way to zero none show up this is my code i borrowed most of it from somebody else which is what you do when you don't know code very well and you're just trying to figure it out as you go so let's see if if i can actually explain everything that's going on here so up here i'm declaring my variables and i'm just kind of grabbing the elements that are currently in webflow and assigning them to different variables in javascript my range is the slider demo is the output students is the number of students that that dollar amount represents so demo and student number are going to interact a lot and plural is just the s i put at the end of students if the number of students is more than one here are the backpacks so those little circles that are there right now next i'm just setting some defaults when the page loads um and next is where the magic happens this is all the the the functiony stuff so the important thing about this code is calculation so calculation is the number of students in this case but basically it's the number we're trying to represent with our little images and the number we're trying to figure out by sliding this slider around and for this project five dollars equals one student so we're going to take this value divide it by five this is going to round it to the nearest whole number and that is the calculation number that we are looking for um and for everything else down here is how we are going to adjust the images adjust the text to correspond to whatever our slider is saying so here single image is that little circle we have for now and what we're gonna change later on in the design um this down here is telling us if it's just one don't put an s after students if it is more than one then add the s and and down here it is telling us if oh this is the thing where we're showing or hiding the backpacks um i think it's still gonna be backpacks um so if you're copying this feel free to change that variable to whatever you want it to be um but yes this is what is being shown by these two things down here so basically now that you've seen my hot code mess what i really want to do is uh make it look nice because this is not cute now i don't have a ton of inspiration here i was trying to i have more stuff on this figma board where i was like maybe i'll do illustration give it kind of a more childish fun look um but what i got i'm interested in seeing work here is i've seen a lot of trends recently where instead of like illustrated icons they use like actual images in the file to use as icons so i kind of want to try that and maybe add some here and give this background some kind of interesting feature to it and just tie it all together so that we can develop it into something nice so i am going to do that now [Music] i'm not seeing quite what i want i want like this but i don't pay for it [Music] [Music] so [Music] [Applause] so [Music] so [Music] [Applause] [Music] [Music] i'm wondering if i should yeah maybe i should just under align everything [Music] we don't want to get that crazy um i kind of want to do something silly like this something like kind of kind of wild kind of crazy [Music] like i like this look a lot i don't know if it's too barney i've been seeing it a lot of places [Music] what if that though what if that though if we have like like that or is there like a cuter like a money bags i would kind of like that if could we do that though i don't feel like oh it would be kind of cute though it's so weird okay hold on one minute let's see if it works oh my god no it looks weird does it does it look weird like a little ah it just doesn't read well yeah i'm just gonna keep it what it was whatever i like this i think this is gonna work good um cool nice let's develop it okay let's do it [Music] it works sort of binary um okay i can make this work i can make this work it's fine [Music] [Music] [Music] so [Music] [Applause] [Music] [Applause] what did i mess up did i mess up anything [Music] oh i did it except i'm gonna have to fix this also i don't know how i feel about this extending beyond so we have our image our image is in our wrapper and this is what it looks like when all of them are there and it goes way outside the page which we don't want it to do so our image wrapper probably should also be within our slider wrapper no that's not it actually the content wrapper needs to be have a minimum width or a max width that might be it was that this all okay hey hey it is the solve oh my god that's so fun ah here we are it's the thing we made in the last 30 minutes after i stopped recording i changed this to be a little coin instead of the dollar i did like the dollar better but i couldn't just to make this part pink there was like i couldn't get this little thing to overflow i'm sure somebody who's better at code can figure that out but i just i just couldn't do it um so this is how it works now um and you can calculate your impact amount and you can see it here with the little backpacks and there they go and it's so cute um and then this leads to a little donate link so if anybody wants to use this one of their projects uh if this video is up that means it is a cloneable on my webflow account so you can play with this all you want yeah this was really fun to make i hope you enjoyed watching it and watching me make it uh yeah till next time have a good one [Music] you

Channel: KC Katalbas

Views: 3,673

Keywords:

Id: B-Almh-4iXQ

Length: 18min 26sec (1106 seconds)

Published: Mon Mar 28 2022