2.1 Toggle Slider Checkbox
The first project is a toggle slider checkbox, very similar to those found on iOS or Android.
- Toggle Slider Checkbox Demo on CodePen
2.1 Toggle Slider Checkbox
Welcome to project number one, which is a toggle slider checkbox. So what we're gonna do here is take a regular checkbox and turn it into one of those toggle sliders that you mostly see in iOS, but on other OS's as well. So we'll start here in CodePen, this is where I'm gonna be writing all of the code for all of the projects. But feel free to use the normal code editor plus browser combination. So let's start with the very basic HTML. We're gonna create an input this type, checkbox, and I'm gonna give it an ID of, let's call it toggle slider. And then, we're gonna add a label for that toggle slider. And the label should say something like, on/off. This text will be hidden, but it's good to keep it here just for accessibility purposes. So now, you can see the result, it's just a simple checkbox. So let's go to the CSS. I'm gonna maximize this because that's all we need from the HTML at this point. So the first thing I'll do is, add just a little bit of styling for demonstration purpose. So I'm gonna style the body tag so that all the elements are displayed right in the middle. I'm gonna use Flexbox, so I'm gonna say, display: flex, align-items: center, and justifiy-content: center. And also, I'm gonna give the body a height of 100 viewport height, or vh. And that will position our element, right on the middle. As I said, this is just for demo purposes. All right, step number one, we're gonna hide the default checkbox. So to do that, we're gonna target input[type-checkbox], of course you can use it by its ID, if that's what you want, but I'm gonna reference it by its type. Simply, I'm gonna set display to none, so that's gonna hide our default checkbox as it is. All that's left now is the label. So now, what we're gonna do, in step number two, is create the slider base and knob, and by knob I mean, the part of the slider that actually moves. So for that, I'm gonna target the label and I'm gonna do the following. I'm gonna start by setting the cursor to pointer, because we want it to behave like a button. And then, I'm gonna hide the text by setting text-indent to a very large negative value, something like -10,000 pixels. And then, I'm going to give it a width, and this will give the final width of our slider. So I'm going to set a width of about 100 pixels, and I'm gonna set a height of about 50 pixels. Now, I actually went ahead before writing this code. I went into sketch and I designed that slider checkbox just the way I want it, and that's where I got all of my measurements. So if we take a look at this, you'll see that it has a width of 100 and a height of 50. This is the default unchecked state, and this is the checked state. And we're gonna add a nice animation when moving this knob from left to right, and we're also gonna animate the color changes. So let's start by setting the background color for this label, and I'm gonna use the value of #dff758, this is taken directly from sketch, and I'm also gonna add a border radius of 25 pixels. That will create the nice, rounded corners. Now to create the knob, we're gonna use an after pseudo-element, which will be positioned absolutely. So in order for that to work, I'm gonna set a position to relative on the label parent. Finally, let's add a transition where it will transition all properties, 0.4 seconds or 400 milliseconds, and an ease out easing. Now, I'm gonna target to the label after, you can use a before pseudo-element just as well, it doesn't have to be an after. I'm just going to indent this, so that we have some kind of a visual hierarchy here. I'm gonna start by setting the content to none, and then as I said, position: absolute; I'm going to set the top, if we take a look in sketch, you'll see that this knob is positioned at exactly 5 pixels from either side. Well, in this case, it's 55 from the right side but we'll get there. So I'm gonna set top to 5 pixels and left to 5 pixels, and I'm also gonna give it a width and a height of 40 pixels. So width 40 pixels, height 40 pixels. Let's give it a background color. You can also use the background property, it's gonna do the exact same thing. #a5cace, this is the code that I'm looking for and we also have to make it round. So for that, I'm gonna use border radius property of 50%, that's gonna transform it into a circle, and we're gonna use the exact same transition as we did for the label. So just by doing that, we created the default state of our toggle slider checkbox. Now, the only thing left to do in step number three, is to create the styling for the checked states. For the checked state, it's actually quite simple. We just say, input: checked. CSS is smart enough to be able to style a checked input, plus label. This means, get the label that's immediately after a checked input. Again, you can use the ID of the checkbox here if that's what you want. And here, we'll simply change the background to #96e7ef. And then, we're gonna target the after pseudo-element, so input:checked + label:after. Apparently, CodePen doesn't like me, which is indenting this. And we'll do a transform: translate3d, I'm gonna explain in just a bit why we're choosing translate3d. I wanna move this 50 pixels on the x-axis horizontally, 0 on the y-axis, and 0 on the z-axis for the z-axis. And we'll just change the background color to #1d6269, all right. So by doing this, when we click our checkbox, we go from this to this. It's that simple. So how are we achieving this animation? Well, this is how we do it. We apply a transform and we use the translate3d function to move that particular element, 50 pixels on the x-axis or horizontally. Now, why translate3d and not translate x? Well, I want translate3d to benefit from hardware acceleration, which means, these animations will be processed by the video card or the GPU instead of the CPU, and that creates more smooth animations. And by using transitions for all properties on both of these elements, we make sure that the background color changes are also animated. And this is the end result. Very, very simple. All right, that was it for this first project, a toggle slider checkbox. Let's move on to lesson number two, where you'll learn how to create a page loader. I'll see you there.