How to Create a Range Slider in Webflow!

hey man you excited for the new spider-man movie um so excited the multiverse is open anything can happen i cannot wait yeah i'm so pumped i just i wish there was a way to like create a visual representation of my excitement in webflow using a range slider and images from all the movies i thought you'd never ask [Music] welcome back everybody happy spider-man no way home week i am so excited for this movie and what it means for the future of the mcu moving forward even if you don't follow it the world's buzz it's going to be a big movie can't wait i'm also still excited about the fn suite attribute library in case you're not familiar i recently did a video about a filterable poketex they've got a lot of great features and the team over there has been really busy supplying some really great tools and resources that you can incorporate with your webflow projects another one of those resources being the range slider so i thought i'd combine my excitement for spider-man and this new library and then make a spider-man themed range slider so range sliders are a great and interactive way for you to filter out items by price by service by item anything you want and f suite makes it really easy to incorporate and customize into your webflow project i'll show you how i made this range slider to show your excitement level for the new spider-man no way home movie you're able to slide this icon along the track from a value of 1 to 11 and then the collection list beneath it is filtered out based on the corresponding values that we match up so just a quick refresher in case you're new to the f suite attribute library it is a javascript library that handles all these cool features for your collection list items like filtering sorting pagination a bunch of stuff check out their website for all the different features that are available but basically you copy one piece of code into your webflow project so it can communicate with this external library and then you just target the elements that you want to act as triggers and filtering and add correct attributes so that it can communicate with the library behind the scenes and apply all the cool features that you're going for in your project so for this project we're going to access two of these attribute libraries one being the actual range slider library and then the other being the filter library so we're going to need that filter library so we can actually filter what we're clicking on the range slider and then only return whatever's within that range that we're setting but you don't need to incorporate the filter element if you're not going to link it up to a cms that's being filtered based on the trigger of this range slider if you want to just have one range slider for someone to play around with you can just use that so here's my basic project here at the start i have a heading with some graphics and then a cms collection beneath these are all just items that have an image the excitement level here has a text area and then a description when you hover over the card this interaction occurs so the first thing i'm going to do is head over to the filter library on f suite so i can set that up so the first step of any of this is copying the script file because this is really just a javascript library that lives externally and we want to make sure our webflow project can attach itself to that so we'll copy this script paste it in the header tag right up here so now our webflow project has access to this filter library and then in the documentation you'll see it just kind of has the different steps to go through first thing we'll do is tell it which collection list that we're targeting so it tells you the attribute to assign it to and the value so we'll copy this attribute and the value will be list so we'll just remember that and we'll target this which is our spider-man collection list of items and in the settings we'll just apply this attribute and we will call it list so now it knows what to filter and what to target but it needs a way to communicate with that and have sort of triggers that will filter this later on so to do this we'll add a form block and i'm pretty sure that most if not all of the attribute libraries use the form block so that way it can handle the data being synced up and that will be the trigger for this project so i'll just delete all the basic elements that come inside the form and this way we'll just have a clean form to work with later on so back in the documentation the range slider it has all the information that we'll need and obviously this is a different library so we'll have to copy this script as well so it has access to all the functionality of the range slider because the first one was the filter library and this one is a different library this is the range slider so now we have both there now we can add all the attributes accordingly so you'll see in the documentation of the slider everything is kind of laid out nicely and they kind of visually show you the structure of this but i'll build out another example to show you what's actually going on so our first div is the wrapper this is just going to hold all of the other components that make up the range slider then inside of that we're going to have another div that will serve as the track this is the background that shows the entire width of the slider itself inside of the tractive we put another div that'll serve as the fill this is the visual color that is set to show the progress of the bar as it fills up the slider then also inside of the track element is the handle div this is usually the circle that the user can drag that serves as the handle of the range slider but it doesn't have to be a circle it can really be anything you want i made it the little spider-man image for my project you can just put one if you only need one but since we want two handles to control the range we'll add two next we'll add a text input anywhere inside the wrapper this will hold the value of the range slider we won't see these on the page but they will hold the like the data value of the range we are targeting so we'll need two of these as well since we will have a minimum and a maximum range lastly we have some text fields just to display the visual numbers on either end of the range slider these can live anywhere inside the wrapper element and i'll put them inside their own div later so i can display them flex and justify the space between so they push to opposite sides and to make sure the fill color and the handles can live and move around inside the track we'll have to make sure the track as the parent element is positioned relative and the fill and handles are positioned absolute so now that we have a visual of all of that let's build it out in webflow and actually add the attributes to these things so they can sync up with the library just inside of our form i'm gonna target this form element i will add a div so this div will serve as the wrapper and i'll head over right in here and this will tell us what attribute we need to assign to the wrapper so i'll copy this and then the value will be wrapper so in the settings custom attributes i'll paste that and the value is wrapper and i'm just going to give this 20 pixels padding all around just so once we add everything inside it it will have some space inside the wrapper i'll press command k add another div and this will be the track and i'll copy this attribute as well the value will be track and you'll see here like we had noted this must be set to position relative so the nested fill can be set to absolute value is track and the position will be relative i'm going to make the width 96 of its parent container i'll make the height 0.5 rem and then i'll give it some left and right margin of auto just so it is centered in the middle there inside the track will be another div this will be the fill div that we mentioned and then this attribute here copy that the value will be fill and this must be set to position absolute just like the handles will be so attribute there fill is the value and position absolute i'll make the width ten percent the height hundred percent and i'll give it a blue background color here just so we can see the progress as we make slide changes later the next thing to do is add the handle normally you can add a div and just turn it into a circle but for my case mine's going to be an image right so i've got the image there right inside the track i'm going to go here and copy this handle attribute the value will be handled and it must be set to position absolute so in here value handle position is absolute great and now i'll just choose the image i've got this little spider-man face logo there gonna make the width and height just 60 pixels and then give the bottom positioning just adjust this a little bit and make it negative 25 just so it lives on the slider there and since we need two of these since we're going to have one on each end as seen in this finished product i will just copy this handle so now there are two right inside of here and this will be more visually apparent later on once everything is viewed live in the browser with the library being applied to it next inside the wrapper we're going to add the hidden input value and we're allowed to do this because we're working inside of the form itself right so i'll just name this input and since this will be syncing up with our cms filter that we set up we need to add two attributes so first we can add the filter one and we'll see here we'll skip down to the field identifier since we're working with the form element below it so the first filter one will be this one and it'll be from and this value is from because it's the initial value that the range will be set from and then we're also going to need the cms filter field attribute and this is the one that links up with the filter library that we set up first so i'm going to add this as well and you'll see here that the value is just in the identifier so this could be anything that you want it'll just usually be whatever you're kind of targeting so i'm just going to call this number since it's the number level of excitement that we're after so i'm going to save that and then i'm going to go down to our collection list because this is the value that is going to be directing towards our collection list down here and it needs to know how to filter this by we're targeting all these numbers right we want the the corresponding number to be the one that's filtered out so we select that element the number and i'm going to add that same attribute with the value of number so now they're matched up so now when we filter out based on this range slider it'll look to this element to filter that out by so now i can basically just hide this because we're not going to see this but we're going to need 2 because we have a from value and we need a 2 value as well so i have a second one and copied those attributes but i'm just going to change the name of this one to two so from will be first because it's the left slider input and then it has the filter library attribute as well and the other one will be two so it's going from 0 or 1 to 11 and that's the input part of this and then lastly i'm just going to add a div inside of here that will hold the two number values that live on either side of this and the ends so within here i'll just have text blocks and i'll make this say zero the other one will say 11. i'll change up the styling for this a little bit and you see how they're stacked on top of each other well if we just target their parent container i'll make this a flex container and do justify space on either side here we go and these guys have to have an attribute as well and you'll see in here that this is the range slider element display value so that's the value we're giving the two numbers here display dash value and just make sure both of them have it all right so now all the basic things are set up it won't work exactly yet so there's a few more steps so if you just go to the documentation the list beneath of the other steps you might be able to take to make it better and complete it so the next thing the minimum value of the range slider we do want to add this so this will be the starting value that we're setting and we're where are we adding it we're adding it to the wrapper so i'll copy this the value will be whatever we tell it so if i target the wrapper i'm going to go down here add another attribute and we want to start at one and then the next one you might guess is the max value i'm also going to add this to the wrapper and we'll make that value what we want it as well so this value will be 11. so the range is 1 to 11 on our excitement slider the next thing we have access to would be steps it's the increment values that your slider will go up on so i'm just going to do one because i only have 1 through 11 but say you have something with a bunch of prices listed for cars or different services you might want to go up in increments that are larger like buy a hundred or a thousand or something but since this is very small i'm just going to go up in increments of one so we're also able to tell it where to start when the page loads so you could have it start somewhere in the middle or you could have it start at one and we can add this to each of the handles too so they can start in different places technically so this first handle i'll have it start at one second hand will start at three and then lastly there is two more options you're able to change the format display of the numbers if that's an issue for you depending on countries and commas whatever you're using is not appropriate or you can change the update method and you can have this update only when the person releases the trigger or when they're moving it so by default move is the option which is the one in place here so it'll filter beneath as you move it along or you can change it to filter only once the person releases the button i like it how it filters in real time so i'm going to leave it just as the default so remember this is a javascript library so it's not gonna work in the webflow designer itself so we're just gonna have to publish this and then see our changes live so i'll go to this version here and you'll see it doesn't work so something went wrong let's go see what's going on here well a few things that i noticed right away we forgot to add a color to our track so let's just add a white background color to this track so then we can see what's happening another thing i want to do is add a cursor pointer to this handle so let's just go to here so this on hover when we look at the spider-man it'll turn to a pointer makes it a little more obvious that something that can be interacted with and then i know what i forgot to do so we have our cms filter library targeted here right but we don't have the trigger targeted so this knows that this is going to be filtered but it doesn't know what is going to be doing the filtering so i forgot to just target our form element because this holds the trigger which is the track and the handles and all these things so this has to have its own attribute as well so if i go back to cms filter you see here this is telling us i have to put an attribute on the form block itself and it'll just be called filters so on my form i'll go over here this filters great and then our collection list already has the attribute for list so let's publish this again and see if that fixes everything all right let's check this out again so now i can interact with these guys and the filtering is happening so how excited are you i'm about a scale of one to six or four to six and now you'll see only four through six show up if you're not as excited you can lower this down and maybe you're on a one three level maybe you're on a one to two level or if you're really pumped drag it all the way up here and you'll see only the end ones will show up so this is a very specific example which is just a kind of a fun way to get excited about the movie but you can imagine if this was a list of car brands or things that were on sale or services that you offer your collection items could have a price tag attached and you could filter this out the price range if somebody only wants to look at things that are within their budget and only the ones that they could afford would show up or you can customize it however you would like and you can only have one of these if you want to remember we did two handles so we can create an in-between number but if you only wanted one just delete one of the input values and one of the handles and you can just drag it to display one result at a time instead so i hope this helped you understand the range slider attribute a little bit better in the f suite library and i hope to help you understand the fn suite library in general if you weren't familiar with it already they have a lot of great other attributes and things to explore on their website so head on over there for the full list of the features i'll try to keep making videos on the different features as i discover them and play around with them but if you got value out of this one in the meantime i always appreciate a like and a subscribe if you need to look at the structure of this a little more closely i'll put the cloneable webflow project linked right below i can't wait to see in the next video by then i'll have seen the movie already some of you have probably already seen the movie you might be watching this a year from now where the movie's already been out regardless can't wait for spider-man no way home let me know what you thought of it in the comments below in the meantime keep testing your webflow skills but remember that with great power comes great responsibility [Music] you

Channel: Cullen Kuch

Views: 2,152

Keywords: webflow, webflow range slider, range slider, webflow tutorial, webflow cms, finsweet, finsweet attribute library, webflow attributes, web design, web development, webflow 2022, finsweet range slider, cullen, cullen kuch, spider-man, spider-man no way home, marvel

Id: WFxZSa14uG8

Length: 15min 45sec (945 seconds)

Published: Thu Dec 16 2021