(2022) Webflow Range Slider - No-Code Attributes

welcome to the full build walkthrough of the range slider solution in attributes this range slider can be used in a web form it can be used with cms filter attributes we are able to really take full control of what this range slider does in our project it's very flexible and it's completely built in designer we're actually going to build each piece of this range slider and with attributes it turns into a very powerful visual component for our build [Music] let's jump in the first thing we do is go inside the docks in the docks step one before we get into any of the fun stuff is copy this script and go add it to the head of the page and that's exactly what i'll do i just copied it to the clipboard i'm going to paste it to the head and now i have this ready to accept attributes and next step two let's implement this in webflow we're going to be building this entire thing we're starting from nothing here so this is our project we're going to build in this container and this is available as a clonable so let's look at this structure first in the docs we have our wrapper track fill and handle wait before we continue with this walkthrough i want to show you an update that was just made to the documentation i recorded this video this walkthrough is great it really does a good job showing you range slider but i realize there's actually a better way to organize this documentation so we're going to continue with the documentation when i recorded but i want to show you what it looks like now i have reorganized to now add this text input field and the display value it's part of the structure so instead of putting them down here they are now shown visually inside this structure look how we have the fill the handle and the text input all nested in the track and then we have this display value and the display value can be anywhere in the wrapper we have it right here outside of the track so continue with this walkthrough we're going to build it we go through all of these steps but now you can visually see that this text input is inside the wrapper we don't need any attributes for it initially we can apply attributes to it if we are integrating with cms filter and same with this instead of having it outside it's part of the wrapper this is the display value we're going to go over this all right back to the walkthrough enjoy this range slider video we're always making updates to the docs and this is one of them we're going to build this structure exactly wrapper track fill handle and we're even going to use these same identifiers when we're naming our classes and when we apply the attributes so let's jump first to designer and add these divs in here and give them class names the wrapper with a nested track with a nested fill with a sibling handle so let's do that right now we're going to add a div block to the page and this will be the fs range slider in our range slider component and we'll give this wrapper as the name the class doesn't matter i'm going to go through how i would name this in client first but classes can be whatever you want here if you use a different system go ahead and use that different system so let's go in and create the track that is nested inside the wrapper and then nested inside the track we have that fill and then as a sibling we have the handle now let's open up navigator let's make sure that we do have this correct we have the wrapper we have the track we have the fill we have the handle perfect wrapper track fill handle exactly in this structure now we need to go and add an attribute to each of these and we're going to do this before we even start designing i'll go and open this up to see that we're going to add the fs range slider element wrapper and we use the same naming for each of these the wrapper the track you can see the fill and of course the handle so let's go do that right now i'm going to go to the wrapper add that custom attribute and that's going to be the wrapper inside let's work with the track and i'll go one more into the fill and sibling up to the handle so now these are fully attributed we don't need to do anything else with attributes on this main structure now let's open up each of these in the docs to understand what it does understanding what it does is going to help us visually show it on the page the wrapper this is the containing element parent that contains the ui elements this is just a wrapper we may not even have any styles on this okay let's go to the track the track is going to be the background or what shows the start and the finish of the range slider this is what the fill and the handle will slide across on and you can see in this visual this is a gray background that is showing it starts here and it ends here the fill this is the color inside of the track this is now nested in the track this is the color this is what's going to show what's active or what's currently being selected by this range slider and then we have the handle the handle is the circle or whatever you want it to be we're going to build a circle in this example we see a circle in this visual example here but you can have a square or a star or an image or a background color or i don't know maybe even a lotty animation it's pretty flexible as long as the element has the attribute it's probably going to work so this is really really flexible in terms of how creative we can get with this so now that we know what everything is let's go back into designer and create some type of visual to help visualize what this range slider looks like let's start with the wrapper here and let's give a little bit of padding and maybe a white background so we can see it different from the rest of the page let's give this the white background and the track let's we definitely need a background color on that track let's add this default gray here and we should probably add a height that's a bit too big maybe a two rem yep this is going to show the size of it both in with and in height so i'll even go and apply a 100 here and we have a fill this is going to be the the color inside that shows what is active so let's add a width because we're not going to be able to see anything just yet this doesn't look like anything in designer so let's create let's say 10 rems 100 height there we go now we can see what's going on and let's create a background color of this kind of purple nice so that looks pretty good we have this big giant track we have this nice big fill and now we need this handle so let's go and make this [Applause] yeah we'll do something like this so we really see the handle let's give it a radius of a hundred percent we want this to be a circle and now let's give it a width and a height that are the same and there we go then we have our handle our fill and our track we need to do the important step of applying the position relative to the track the fill as absolute and then the handle also as absolute this is required in the setup you will see this information inside the description important this must be set to absolute for the handle the fill this must be set to absolute and then we have the track this must be set to relative these are requirements so that we can properly apply the styles with attributes automatically with that script that we copied in the beginning of this walkthrough so we don't have to do anything else it's going to now magically turn into a range slider on publish and that's exactly what we'll do right now we're going to push a publish through we're going to see this working and be able to drag this circle on the track let's go and check this out here on the publish page let's grab this circle and drag it there we go this is exactly what we want to see we have the range slider going up and down now this isn't actually doing anything just yet as of right now this is just a visual and the reason is we don't have any value attached to it that's going into an input if we want to use this in a form or we want to use this in our cms filter setup we need to have inputs and the inputs will say where this range slider is and then we can do something with the data so let's go and add these new elements to the page let's look at the options and we'll get this looking exactly how we want let's go back into the documentation and let's close up this we don't need this anymore wrapper track fill handle complete now we can look at the display we can look at the text input and we can look at some really important options let's start with the display i'm going to copy this range slider element and we're going to give it to a text value with display value as the value this is going to literally display the current value of the range slider so let's go and do that we're going to add it inside this wrapper and let's make all text inside of this wrapper black let's go and add a text block this will be the fs range slider let's call it the same thing as the docs we're going to add this attribute to it display value so let's go and do a four rem on top here this is going to be the value and let's go ahead and add this attribute of course display value excellent so on the publish page this is going to display the value of the current position now let's decide what the beginning of the range slider is what the end of the range slider is and how many steps each drag is going to be let's open this up and say fs range slider min and that can go on the wrapper so we can start this at zero we can start it at 100 we can start it at a million it doesn't matter i'm going to add this to the wrapper element and add a zero this is the default by the way you actually don't have to add this it will do zero by default but i like to have it in here in case in the future somebody wants to make an update to it it's already in here they can quickly update this so let's do the min at zero and let's do the max let's do it at 100 also and again i'm going to do the same exact thing here this will be max this will be 100 again the default and now let's do the steps the steps are how many jumps how many steps how many yeah how many jumps or steps that's the best way to explain it will it take with each change of the display if we were to put in 10 here every time we would drag the range slider it would go 10 20 30 40 50. if we changed it to 25 it would go 25 50 75 100. so let's go and check this out right here the 10. let's make this 10 and now let's publish and check on this publish we should see this value updating with the current dragged value we should see the step at 10 so it's going to only show us 10 0 10 20 30 40 50 60 70 80 90 and 100 let's see if this works i'm going to reload and we have a zero here that's a good sign and look at this 10 20 30 40 50 60 70 80 and so on look at this beautiful now let's do a quick check and we'll do a 25 here so now this should go 0 25 75 100. and on this reload we have exactly that there we go nice love it okay so i'm going to change this back to 10. let's go back into the docs let's see what else we need to do here let's look at the starting value of a handle on the range slider we're able to start a handle at a certain location so maybe we want to start this at 50 or 20 or 30 instead of zero i can add this to the handle element to define where it is supposed to go note that this is not the wrapper this is the handle so watch as i apply a 20 a 30 here as i publish this we're going to have the steps of 10 and we'll start on 30. there we go so it starts on 30 and now i can use it as normal so that's how the start works format display let's look at this we can format to a different display and i will show you now a much larger number and show you the difference between no commas or commas here in designer we have our wrapper this will be applied to the wrapper element and the format display is going to be true now we also want to make sure that we have a big giant value here that has enough enough places to create these commas or periods let's make the step a thousand that sounds pretty good okay now let's look at this now we should have a range slider with a much larger range and we're going to see a value that's comma separated all right let's try this there we go look at that do we get to millions yep nice cool so look at those commas in there in the docs you'll read something very cool that we're going to format the display value based on the user's location some countries use commas some countries use periods we're going to make that decision based on that user's location so format display has a little bit of intelligence to it it's going to try to be as native to the user as possible and this goes on the wrapper we're done with this all good we're going to get to this after let's jump up to one of the elements that we never went over and a really important one it's this text input field this is going to be what holds the values of the range slider handles this is required if you are submitting a form or you are using our cms filter solution and it's very likely that you're doing one of those things either submitting a form or doing a filter so you're going to need this and when you understand how it works it is really powerful start thinking about how you can create interactive experiences with this in a form totally badass let's get into it when i open this up we're going to see attributes for filter a lot of this is for filter and when we have the filter we can apply these to let it work with the filter we have the cms filter field identifier we have cms filter range from and cms filter range two these are from the cms filter docs when we're just applying it as an input the only thing we have to do is drop it in in designer we have our structure and what i'm going to do in this track is add a form and inside that form add an input field so i will go and open this form i'll leave one of these text fields i will not have the submit button and we have this text field which is going to be let's call it range slider input and this is it i'm actually going to put it over here let's see what this looks like we're going to see this update with this let's look at this this will be pretty cool this will also be a great way to see one of the new features of this range slider deciding when the values get added to this text field but we're jumping ahead of ourselves here let's look at this watch this we are adding this to an input we don't need to do anything else here nice so now that we have this value in an input we can go in these docs when we're setting up our cms filter and we can add this identifier we can add the from and we can add the two let's go into our green cars example and see what this looks like we have this range slider this was what we just built and now look at this we have our input hidden it has our field identifier is price it has our range from and then we have price with the range two so this setup is live in the green cars example you can see this the range slider input is there next we're going to see how easy it is to turn this into a two handle range slider right now we have the one handle working really well everything is as planned but we want two handles one for a min and one for a max let's go in and do that i don't even need to go to the docks here because what we have to do is simply duplicate some of these elements any element that needs to be duplicated for a two handle will be duplicated so let's start with the handle itself right we want two handles so we need two handles and then we want two display values so we'll duplicate the display value we're also going to duplicate the input there we go so we have two handles we have two display values and two text fields now when i publish this is going to turn into a two handle range slider that's it just duplicate the elements and attributes will know that you want to do two and that's exactly what we're doing here check this out so look as we change the values as i'm moving and changing the other values as i'm moving cool so this totally worked this is exactly what we wanted a two handle range slider and now remember i can add the cms filter from to this input and the cms filter 2 on this input excellent so now let's look at this awesome feature this awesome feature is called slider update range slider update and i can choose between move or release let me show you what this means move means the value is going to change when i move the handle as i am moving the handle the value will change release means as i release the handle the value will change the best way to see this is visually i'm going to go into the green cars example and i'm going to show you what this looks like on a live site then we're going to see it actually working inside the input field so let's go and open up this green cards example this one has move watch as i move this see it flashing as i am moving this with every single move it is updating the filter this is filtering so fast that every flash is a new filter doesn't look great mileage has the release option and look at the difference here it's not updating until i release doesn't update until i release so this is a much better experience when you're using it with something like filter so let's clear these and see it again release and release much cleaner experience so depending on what you need you may need move or filter by default it's move so let's remember what that looks like in our example look at this moving in real time now watch what happens when i go and apply the release that's going to be fs range slider update and this is release it completely changes the experience for cms filter on the publish page we are going to see release look at this we still have the display value in real time we're going to want that always in real time but it the input does not update until i release so i am dragging dragging dragging release it updates dragging dragging release it updates and same thing with this handle so again this could be a good use case for your cms filter and this is exactly what release does you can see it in action remember when you are going to publish you do not need to have these fields this can be absolutely hidden we want to go and hide this and there we go we can go and build any type of range slider the possibilities are almost endless they feel endless because you really can do anything with this so please use these in your forms use these in your cms filter setups and you'll be a pro implementing range sliders with attributes

Channel: Finsweet

Views: 12,014

Keywords: webflow

Id: In1pQJkNR8A

Length: 25min 10sec (1510 seconds)

Published: Wed Feb 16 2022