WEBVTT 0 00:00.070 --> 00:03.830 All right, my dear students, I'm going to be going a little bit faster because I think you're getting 1 00:03.830 --> 00:04.730 used to this by now. 2 00:04.760 --> 00:07.250 Okay, here we've got a blank index file open. 3 00:07.250 --> 00:08.780 Let's start with HTML. 4 00:09.590 --> 00:12.210 Here, we need a head section. In here, 5 00:12.230 --> 00:16.640 let's have a title "Custom Range Design". 6 00:16.730 --> 00:17.720 It's going to be really fun. 7 00:17.720 --> 00:19.190 This challenge, I can't wait. 8 00:19.190 --> 00:19.970 I can't wait. 9 00:20.090 --> 00:22.790 And then let's link to our CSS file. 10 00:22.790 --> 00:26.840 Just because it's going to be quite large and I want to call it styles.css. 11 00:26.870 --> 00:27.430 That's all we need. 12 00:27.440 --> 00:30.470 And then let's define a body. Within our body, 13 00:30.500 --> 00:31.040 you know what? 14 00:31.070 --> 00:35.510 I won't even add a form here, you know, because it doesn't matter where you put this on your app, 15 00:35.540 --> 00:36.740 you know, it could be anywhere. 16 00:36.980 --> 00:43.290 But as you know, I always love wrapping things in a wrapper when it comes to CSS, it's so much easier. 17 00:43.310 --> 00:48.050 So let's define a div and we can give it a class of wrapper. In here, 18 00:48.050 --> 00:52.010 want to define our range input type. 19 00:52.460 --> 00:53.870 That's the first thing I want to do. 20 00:53.900 --> 00:54.950 How do we do that? 21 00:55.370 --> 00:56.060 That's right. 22 00:56.060 --> 00:56.960 Very, very easy. 23 00:56.990 --> 01:02.070 We define the input HTML element with its type attribute set to range. 24 01:02.580 --> 01:03.510 Very, very simple. 25 01:03.510 --> 01:05.850 We can ... we actually don't need a name here. 26 01:06.150 --> 01:08.100 We're not submitting anything to a server. 27 01:08.100 --> 01:11.430 And let's give it an ID of "range" because that's what it is. 28 01:11.580 --> 01:16.530 If we save that, refresh the browser, you can see this is the standard, you know, default styling, 29 01:16.530 --> 01:23.880 the browser gives it. Pretty straight forward. But I want to give it a minimum value of say, 0, and a maximum 30 01:23.880 --> 01:25.860 value of 1000. 31 01:26.990 --> 01:30.710 And let's give it a default starting value of 500. 32 01:31.500 --> 01:31.720 Right. 33 01:31.770 --> 01:33.210 So it starts in the center. 34 01:34.040 --> 01:34.820 Makes sense. 35 01:34.820 --> 01:38.600 The next thing we're going to have to do, is we're going to have to create an output element because 36 01:38.600 --> 01:44.330 remember, by default, the value of the range is not shown to the user until he or she submits the 37 01:44.330 --> 01:44.660 form. 38 01:44.660 --> 01:45.680 And we don't want that. 39 01:45.680 --> 01:47.210 We want to show it dynamically. 40 01:47.210 --> 01:54.620 And as the introduction challenge video showed, we want to show that value in a cool little style widget, 41 01:54.650 --> 01:55.790 if you want to call it that. 42 01:55.820 --> 02:02.150 Let's code up this entire kind-of output in the HTML <output> element. 43 02:02.480 --> 02:04.640 It can be empty for now, right? 44 02:04.640 --> 02:05.870 It's going to be dynamic. 45 02:05.870 --> 02:10.360 Let's give it a class so we can style it and the class name can be anything. 46 02:10.370 --> 02:14.810 Let's just call it rangeValue because we're going to be showing the value of the range attribute ... 47 02:15.080 --> 02:22.430 sorry, we're going to be showing the value of the range widget in this output element. And let's give 48 02:22.430 --> 02:25.910 it an ID, we can give it an ID of ... just in case we need it later, 49 02:25.910 --> 02:28.160 I'm not sure what we'll be doing in CSS yet, 50 02:28.280 --> 02:29.960 we'll just wing it as we go along. 51 02:30.440 --> 02:34.940 And I think my dear students, this is it for the HTML, right? 52 02:35.090 --> 02:36.650 Very, very straightforward. 53 02:37.250 --> 02:38.870 See, I told you there's not much to it. 54 02:39.200 --> 02:40.580 But we're not done, are we? 55 02:40.580 --> 02:45.110 Because I want us to now start styling this up with some CSS. 56 02:45.110 --> 02:47.330 So let's go to our CSS file. Again, 57 02:47.330 --> 02:49.130 it's empty, so let's get cracking. 58 02:49.140 --> 02:57.260 First thing I like doing is I like removing the default margins that the browser applies to your page. 59 02:57.350 --> 02:58.250 It's just irritating. 60 02:58.250 --> 03:03.080 Later on when you get more complicated, you can't figure out why things aren't quite aligned, and 61 03:03.080 --> 03:04.790 normally it's because of the default styling. 62 03:04.790 --> 03:06.830 So let's target the body first. 63 03:06.830 --> 03:13.550 And let me just say here, for your own knowledge browsers add 8 pixels of margin by default. 64 03:14.370 --> 03:16.470 Let's remove this. 65 03:17.330 --> 03:19.400 So let's give it a margin of zero. 66 03:19.910 --> 03:23.270 You can see the browser is already affecting the styling. 67 03:23.600 --> 03:29.540 Now I just want to set the minimum height of our entire page to 100vh. 68 03:30.560 --> 03:33.380 This will actually will only affect it later. 69 03:33.720 --> 03:38.540 "vh" in case you're wondering, is just a property 70 03:39.360 --> 03:44.070 related to the actual viewport itself. 71 03:44.070 --> 03:47.070 So we want the height to be the entire viewport. 72 03:47.100 --> 03:48.330 That's all I'm saying here. 73 03:49.170 --> 03:51.540 I want to align-items to the center. 74 03:52.380 --> 03:54.060 Um, padding, 75 03:54.510 --> 03:58.320 let's set the top and bottom padding to zero. 76 03:58.500 --> 04:04.110 And then what we can do is we can set the left and right to 10% of the viewport size. 77 04:04.680 --> 04:05.880 Yeah, I think that makes sense. 78 04:05.880 --> 04:06.990 I think that makes sense. 79 04:07.230 --> 04:09.480 And of course, you know me by now, 80 04:09.510 --> 04:13.740 like the flex layout, and we can justify content to the center. 81 04:14.440 --> 04:15.260 There we go. 82 04:15.300 --> 04:18.730 So this is what our range widget has now become. 83 04:18.730 --> 04:19.430 How cool. 84 04:19.450 --> 04:20.560 All right, let's keep going. 85 04:20.560 --> 04:21.370 Let's keep going. 86 04:21.400 --> 04:27.490 What I want to do now is I want to target the input with its type attribute set to range. 87 04:28.130 --> 04:29.110 What do I want to do here? 88 04:29.120 --> 04:30.470 Well, let's apply some margin 89 04:31.010 --> 04:34.910 to the top and bottom, and then zero to left and right. 90 04:34.950 --> 04:35.960 "r", 91 04:37.200 --> 04:37.980 margin. 92 04:40.840 --> 04:41.200 Okay. 93 04:41.200 --> 04:44.410 And then the width, we can give it 100%. 94 04:44.440 --> 04:51.100 Okay, my dear students, how do we now target the actual range itself and apply CSS to it? 95 04:51.550 --> 04:52.500 Let me zoom in a bit. 96 04:52.510 --> 04:54.370 Let's inspect this widget. 97 04:54.610 --> 04:55.330 All right. 98 04:55.330 --> 05:00.040 If we inspect the actual range widget itself, can you see in the shadow-root, 99 05:00.100 --> 05:01.270 don't worry about what that means, 100 05:01.270 --> 05:08.860 but basically we are given this by default by the browser, and the browser has applied a property called 101 05:08.860 --> 05:11.860 webkit-slider-runnable-track. 102 05:13.080 --> 05:13.950 Can you see it? 103 05:14.640 --> 05:18.720 And if we open that up, that's where the styling comes from. 104 05:20.360 --> 05:27.020 So what we want to do is we want to target that webkit-slider-runnable-track pseudo element and we 105 05:27.020 --> 05:30.830 want to affect the styling on that. So we can go to our file here, 106 05:31.040 --> 05:37.130 let's just remove this for now, place it to the right and we want to target our input with type of 107 05:37.130 --> 05:41.480 range, but this time we want to target the pseudo element, right? 108 05:41.480 --> 05:46.490 And we know it's called webkit-slider-runnable-track. 109 05:47.490 --> 05:48.780 And this is what's really cool. 110 05:48.780 --> 05:51.430 We can now apply custom styling to it. 111 05:51.450 --> 05:53.460 Let's just say the height is 7 pixels. 112 05:54.420 --> 06:01.950 Let's say the cursor is a pointer, so the user knows it's kind-of a range selector. 113 06:02.190 --> 06:04.320 We can change its background. 114 06:04.740 --> 06:08.970 Let's just give it #2998cc. 115 06:09.300 --> 06:10.170 How cool is that looking, 116 06:10.170 --> 06:10.560 students? 117 06:10.560 --> 06:13.200 You can see it's, you know, being applied in real time. 118 06:13.470 --> 06:14.430 Very, very cool. 119 06:15.150 --> 06:17.670 And then I don't like those square borders. 120 06:17.970 --> 06:25.140 And in order to round it, we just apply a border-radius property and that we can just set to 50 pixels. 121 06:25.170 --> 06:26.040 There we go. 122 06:26.040 --> 06:26.720 Nice and round. 123 06:26.730 --> 06:29.340 We can do exactly the same thing, my dear students, 124 06:29.340 --> 06:36.630 but now we can target the webkit-slider-thumb. And that will apply styling to that little round thumb. 125 06:36.810 --> 06:39.540 Effectively this round button that moves up and down. 126 06:40.220 --> 06:46.610 So again, we want to target the input where its type is set to range. 127 06:46.760 --> 06:54.320 But this time, you guessed it, we're going to target the pseudo element of webkit-slider-thumb. 128 06:55.630 --> 06:59.740 And again, let's apply a border-radius to this of 100%, 129 06:59.740 --> 07:01.000 so it is round. 130 07:03.090 --> 07:04.350 I guess we didn't really need to do that. 131 07:04.350 --> 07:05.580 It is round already. 132 07:06.360 --> 07:08.220 Let's give it a nice box-shadow, shall we? 133 07:09.800 --> 07:10.070 Box 134 07:10.070 --> 07:12.050 shadow, 0 0 5 135 07:12.050 --> 07:13.160 pixels, 0, 136 07:16.350 --> 07:17.640 and 1. 137 07:17.640 --> 07:19.290 Yeah, I think it looks cool. 138 07:19.680 --> 07:20.610 I'm quite zoomed in yet. 139 07:20.640 --> 07:21.760 Let me just zoom out a bit. 140 07:21.780 --> 07:23.370 There we go. Again, 141 07:23.370 --> 07:26.610 we can do cursor:pointer. What we can do, 142 07:27.380 --> 07:27.920 look here, 143 07:27.920 --> 07:31.760 if I zoom in, can you see there's a slight white background? 144 07:31.850 --> 07:33.050 I don't want that there. 145 07:34.390 --> 07:36.510 I actually want to remove that slight white background. 146 07:36.510 --> 07:40.920 So in order to get rid of that white background, let's change its background property. 147 07:41.130 --> 07:42.060 I guess it doesn't really matter. 148 07:42.060 --> 07:43.080 Here, let me just go blue. 149 07:43.110 --> 07:44.340 Yeah, there we go. 150 07:45.420 --> 07:47.250 And then I want to just push it up a little bit. 151 07:47.250 --> 07:51.330 So let's just say margin top -5 pixels. 152 07:51.630 --> 07:52.320 There we go. 153 07:52.980 --> 07:54.170 How cool does that look? 154 07:54.180 --> 07:57.480 So we've already custom designed part of the range picker. 155 07:57.600 --> 07:58.340 How awesome. 156 07:58.350 --> 08:05.520 Now what's really cool, my dear students, is that you can target, or you can use, different CSS class 157 08:05.520 --> 08:08.250 selectors and pseudo elements in one. 158 08:08.250 --> 08:15.180 So for example, if we wanted to change the range sliders color when it's in focus, we can do so and 159 08:15.180 --> 08:16.560 it is super, super easy. 160 08:16.560 --> 08:21.450 All we have to do again is target the input where it's type attribute is set to range. 161 08:21.480 --> 08:28.260 Here we only want to change styling when it's in focus, and we want to target the webkit, 162 08:29.300 --> 08:29.600 sorry 163 08:29.600 --> 08:33.500 one dash, webkit-slider-runnable-track. 164 08:34.100 --> 08:36.860 And we want to change the background color here. 165 08:37.010 --> 08:41.300 And we can do it to #1f759c. 166 08:42.130 --> 08:47.680 Now, when it's in focus, can you see how it's darker when the user checks out of it and it's out of 167 08:47.680 --> 08:50.600 focus, it reverts back to its default background color. 168 08:50.620 --> 08:51.840 How awesome. 169 08:51.850 --> 08:52.410 All right. 170 08:52.420 --> 08:55.230 The next thing I want to affect is the wrapper. 171 08:55.240 --> 09:00.430 If we go to our index page, we've got this wrapper class with everything in it. 172 09:00.910 --> 09:04.150 Why don't we just grab this wrapper class, 173 09:04.810 --> 09:11.320 and define a width of, say, 500 pixels and change its position property to relative. 174 09:11.350 --> 09:16.140 Just easier for us to move things around a bit later, as you'll see shortly. 175 09:16.150 --> 09:16.690 So there we go. 176 09:16.690 --> 09:17.380 That's our wrapper. 177 09:17.380 --> 09:19.150 We've just made our widget a bit bigger. 178 09:19.200 --> 09:19.480 Okay. 179 09:19.510 --> 09:21.010 Everything else still applies. 180 09:21.070 --> 09:22.870 It's still all working, which is good. 181 09:22.960 --> 09:27.640 Now I want to get into the tricky bits and that is ... I say, tricky. 182 09:27.640 --> 09:28.390 It's not that tricky. 183 09:28.390 --> 09:31.900 It's just, you know, we've got to apply our mind a little bit. 184 09:31.900 --> 09:37.990 I want to define the styling of this output, right, where its class is set to rangeValue because right 185 09:37.990 --> 09:42.160 now when we are scrolling this, we can't see the value in any way. 186 09:42.820 --> 09:46.960 So effectively I want to apply styling so we can see the value. 187 09:46.960 --> 09:48.170 And how do we do this? 188 09:48.190 --> 09:48.970 That's right. 189 09:49.000 --> 09:52.720 We target the ::before pseudo element. 190 09:54.130 --> 09:56.320 So, let's start working on it. 191 09:56.360 --> 10:01.840 Okay, let's save this and let's start working on the actual range value. 192 10:03.540 --> 10:09.930 So, let's make its position absolute because then we can be very specific where we want that output to 193 10:09.930 --> 10:10.500 be. 194 10:10.650 --> 10:11.550 Do you know what? 195 10:11.550 --> 10:12.900 I'm actually going to stop here. 196 10:14.640 --> 10:16.160 Yeah, I think I think that's best. 197 10:16.170 --> 10:17.130 Let me stop here. 198 10:17.130 --> 10:22.760 What I want to do, I know in our index file, we've got this output here, okay? 199 10:22.770 --> 10:24.060 It's empty at the moment. 200 10:24.060 --> 10:26.460 I want us to use JavaScript. 201 10:26.490 --> 10:33.270 I want to add a dynamic span element and I want us to put the value in that span element. 202 10:33.270 --> 10:34.680 And that's why I want to stop here. 203 10:34.680 --> 10:40.470 Even with the styling of the CSS, let's first do the JavaScript together, let's add that element and 204 10:40.470 --> 10:42.780 then we can style it and we can see how that works. 205 10:43.020 --> 10:49.620 Okay, so take a break, take a stretch and I'll see you in the next solution video - the final solution 206 10:49.620 --> 10:51.240 video for this challenge.