WEBVTT 0 00:00.350 --> 00:03.170 Alright, let me hop into my Range Rover. 1 00:04.130 --> 00:05.930 No, not that kind of range. 2 00:05.930 --> 00:08.600 I'm talking about the type of range. 3 00:08.600 --> 00:10.430 Range Rover is a type of vehicle here. 4 00:10.430 --> 00:15.830 I'm not sure if you've got it where you are, but anyway, that was just a dad joke, nothing more, 5 00:15.830 --> 00:16.640 nothing less. 6 00:17.180 --> 00:22.010 Anyways, now I'm talking about the input where it's type attribute is set to range. 7 00:22.010 --> 00:23.390 What is this all about? 8 00:23.420 --> 00:31.250 Well, it's an alternative way to using inputs of type number, but it's mostly used when the user doesn't 9 00:31.250 --> 00:33.980 really care about the exact value. 10 00:33.980 --> 00:39.890 So really, sliders are useful when the user doesn't really care about the accuracy or about the exact 11 00:39.890 --> 00:41.030 value of the number. 12 00:41.030 --> 00:47.630 In other words, usage wise sliders are less accurate than text fields and therefore they are used to 13 00:47.630 --> 00:52.040 pick a number whose precise value is not necessarily important. 14 00:52.040 --> 00:55.220 So just remember that - there are a "range" 15 00:55.910 --> 01:01.200 see what I did there 😹, of useful scenarios where you'd want to use the range type. 16 01:01.200 --> 01:04.620 In other words, there are a number of cool uses you can do with it. 17 01:04.620 --> 01:11.670 For example, you often see these ranges on house buying sites where you want to set a maximum property 18 01:11.700 --> 01:12.840 price to filter by. 19 01:12.870 --> 01:15.330 For example, what is your budget for a house? 20 01:15.330 --> 01:21.510 Range fields might also be useful for those questions on forms like, how likely are you to recommend 21 01:21.510 --> 01:26.610 this product to your friend, with likely at one end and unlikely at the other, for example. 22 01:26.610 --> 01:32.550 Or another question, how do you rate this course? So you can see these precise values might not be that 23 01:32.550 --> 01:33.240 important, 24 01:33.240 --> 01:36.720 and in these cases, ranges can be very, very useful. 25 01:36.720 --> 01:37.380 But enough said. 26 01:37.380 --> 01:40.650 Let's hop over to the console and see it in action. 27 01:41.070 --> 01:43.890 Let's look at a very, very quick slider example. 28 01:43.890 --> 01:48.300 As always, we start with HTML. We can have a head and then a style section. 29 01:48.300 --> 01:52.320 And of course in our body we want to create a form. 30 01:52.410 --> 02:01.910 There's no action required. And in our form, let's create a label ... "for" let's just have it as price and 31 02:01.910 --> 02:07.580 we're going to ask the user to choose a maximum house price. 32 02:08.920 --> 02:09.180 Right. 33 02:09.180 --> 02:10.320 Let's refresh the browser. 34 02:10.320 --> 02:11.070 And there we go. 35 02:12.180 --> 02:16.190 Of course now, we need our input and this time of type range. 36 02:16.220 --> 02:17.560 First time we've used it. 37 02:17.580 --> 02:18.170 How cool. 38 02:18.180 --> 02:23.880 And you can see already visually the browser has inserted a range widget. 39 02:23.910 --> 02:24.720 Wow. 40 02:24.780 --> 02:25.830 Very, very cool. 41 02:25.860 --> 02:27.480 The name can be price. 42 02:27.480 --> 02:33.330 Its ID has to match up to the "for" attribute of the label, which is also price. 43 02:33.600 --> 02:35.660 Just in terms of styling, let's center this. 44 02:35.670 --> 02:37.950 So all I want to do is grab our body. 45 02:38.490 --> 02:46.980 Very quick way is we can max-width the body to 500 pixels and then we can center it. 46 02:48.480 --> 02:49.000 There we go. 47 02:49.020 --> 02:50.640 Just so you can see it better. 48 02:50.790 --> 02:52.890 We can actually zoom in slightly as well. 49 02:53.550 --> 02:54.420 How's that? 50 02:55.370 --> 02:57.710 What I want to do on this input type, right, 51 02:57.710 --> 03:03.460 I want to set parameters. And remember I said the three most important attributes for this are minimum. 52 03:03.470 --> 03:07.790 So let's just say it's $50,000. 53 03:09.280 --> 03:12.940 The maximum can be $500,000. 54 03:13.270 --> 03:16.420 The step can be, and this is the increments, right, 55 03:16.420 --> 03:22.900 every time you hit the right or left arrow on your keyboard, let's step up by $1,000 and let's have 56 03:22.900 --> 03:26.800 a value of call it $250,000 57 03:27.980 --> 03:29.060 as a starting point. 58 03:29.090 --> 03:33.560 The first thing I want you to see, is that visually nothing happens, right? 59 03:33.590 --> 03:35.270 We've got this maximum house price. 60 03:35.270 --> 03:39.020 We don't know what it is. And you can move the slider, but you can't see anything. 61 03:39.020 --> 03:40.460 That's the first hindrance. 62 03:40.490 --> 03:44.870 Secondly, there is no way to see the value until you submit the form. 63 03:44.870 --> 03:50.750 So if we go to our coding editor here and we just add a button of type submit. 64 03:51.840 --> 03:52.770 Submit. 65 03:53.220 --> 03:53.580 Right. 66 03:53.580 --> 03:58.520 If we move this now and we submit, then we see the price. Here, 67 03:58.530 --> 04:00.750 it's $402,000. 68 04:00.750 --> 04:03.750 But until you hit submit, you don't know what it is. 69 04:03.780 --> 04:10.470 And that's why I was telling you that, you know, if the value is not that important, you generally 70 04:10.470 --> 04:12.600 want to use this range widget. 71 04:12.750 --> 04:19.860 But when value is very important, you actually need to visually display that result to the screen somehow. 72 04:19.890 --> 04:26.340 But before we jump into that, I just wanted to show you how easy it was to code up a range. 73 04:26.340 --> 04:27.630 Pretty cool, right? 74 04:27.930 --> 04:28.800 So there we go. 75 04:28.800 --> 04:29.610 We saw it in action. 76 04:29.610 --> 04:32.670 We saw how important it is to configure your slide properly. 77 04:32.670 --> 04:36.780 That is, to set the min, max and step attributes. 78 04:36.780 --> 04:37.800 It's very, very important. 79 04:37.800 --> 04:40.170 But there was a major downside, wasn't there? 80 04:40.500 --> 04:46.800 And that is, the range type doesn't provide any visual feedback to the user. 81 04:46.800 --> 04:51.790 We could only see its value when the submit event was fired on the form. 82 04:51.790 --> 04:57.010 But don't panic, my dear students, there is a solution and that is we can grab the value, for example, 83 04:57.010 --> 05:01.930 using JavaScript and then we can display it to the user in an output element. 84 05:01.960 --> 05:03.040 What? 85 05:03.070 --> 05:03.670 Don't stress. 86 05:03.670 --> 05:04.270 Don't stress. 87 05:04.270 --> 05:08.350 Let's hop over to the coding editor and let me show you this in action.