Hello, in this ionic programming video, we're gonna look at the CSS component, which is range. range, it doesn't really it's not self explanatory just based on the name, you might have heard heard of it as a slider or a UI slider and just turn my phone off. That's all. But yeah, it's a UI slider, chances are, you've seen them at you've used them. And you know what they are based on that name. I don't know why they call them ugly.

Now, why they call them a rank because it's a range of values. But I don't think it's a very good name, but either way, very easy to implement, and very, very powerful. So let's just implement a basic range, the same read for that basic slide. They just sound a lot better, but that's just my opinion. So just go do with a class of item. Correct class have range as well.

And so here, we're going to put an icon This is Yeah, it's not compulsory, but just improve the user experience. So the user knows what the sliding because you are using icons, you don't even have to put any labels to tell the user that they're affecting this property, which is fantastic. So icon on volume dash low, if you want to know about the different icons that you can get in ionic, if you just Google ionic icons, there'll be a link. And yeah, you can see pretty much everything there is to know I'm just going to use like the low volume. So this is essentially what you would have if you allow the user to change the volume in the application. Now you can have an input This is actually the slide itself just can't bring myself the same range it just but this is what this slider range would be so name of this volume.

That name would be used to refer to it later on when you act hooking some code, so it actually does something may obviously in this case, we'll change the volume. And now, it's gonna have an icon at the end, just to visualize the user, that one end is high and one end is low. Generally speaking, users know that the left side is the lower side and the right side is the higher side. But by having an icon as well, both sides just helps improve the user experience because that's what it's all about. Making sure the user experience is as good as it can be. To save this, build a project.

Now, let's run it in our simulator. really should launch the simulator before starting this tutorial I usually do this just a waste of time otherwise Make sure to do it for the next tutorial. Just a few more seconds and it should load Come on almost there if it always seems like it takes so long to load when you load in in a video tutorial, compared to when you just load it off a video call is taking ages I guess it Normal scenario probably just switched desktop and do something else in the meantime. So okay, we have our slider. And as you can see, we can slide it. And based on the icon, you can see that by going this way, you will decrease the volume.

And the general assumption will be this will be zero. And this would be 100, or the highest number, it doesn't have to range between zero and 100. We'll show you that in a second. So here we go. And also it started in the middle, you might not want to start in the middle might want to start at a particular point, for whatever reason, one of the reasons could be is you might have persistent data. So when the user sets the volume, so let's say this about 75%, it might save that next time the user launches it, it doesn't want it to be at the default value, which let's say was 50.

You want it to be out what the user set it last. So we can do that as well. We can also use these color classes as we can with most CSS components in ionic, what we're going to do do is create a list with a bunch of ranges. So do you could use an unordered list for this as well. I'm just going to use a div list. And in here, just grab this from here like so.

So copy and paste it. Make sure the formatting though good. So now let's have a look what we're dealing with. So yeah, what we're going to do is change the item range to have a color. So to do this to do range dash, one of these colors, I'm going to do royal belly correctly for it to work. And the next thing I'm going to do is I'm actually going to leave that copy and paste it again.

Change it to dog this Time, and I'm leaving the icons as they all but you obviously have different icons for different types of input, leaving the name as well because we're not using them, but you would obviously change that as well. So for the input, we want to change the mean value, I'm gonna put zero for the max value, I'm going to put five and for the current value, I'm going to put Actually, I'm gonna leave Yeah, okay, I'm gonna set this to be five, so it's at its maximum value by default. And now we can actually save this, build it. And now we're ready to run it in our simulator. It's gonna be a lot quick and that could be boring. loaded the simulator once.

Here we go, we got our three different ranges. And you can see the second one, which we just added with brackets. Here, we didn't add any value. So by default it was set to well the middle value. As you can see, we can move it like so and the color is there. I'm actually going to change this from dark to no joy because otherwise it just looks like people the default one they are very similar.

So let's rebuild this. rerun it in the simulator. And here we go. So, whereas this one, it is a value five, which is the maximum value because we set the value of five and now let's move this one. As you can see, the jumps are Bigger simply because there's only five increments. So one, Dragon 12345.

And obviously, if we were to have, let's say 25. Let's change this to 25. So there's a lot more increment by still small enough, I mean, still small enough, yet the maximum is still small enough for you to be able to see the individual increments. It's just it's not smooth like the other one. Because by default, it's zero to 100, which means there's 100 different intervals and on a phone, it looks like it's actually moving smoothly, because that's the reason this looks like is moves smoothly, clearly bunch of increments. Whereas with this one, you start your five as you can see, there's a lot more increment, but they are still visible.

So that's it for ranges. If you have any questions, feel free to post them on our education platform. sonar learning Dakota UK there'll be a link in the description. Alongside that there'll be another link to the source code from this video and the source code from every other video in this series. If you like video, please give it a thumbs up, hit that subscribe button and leave us a comment. And as usual, thanks for watching, and I hope you have a great day.