WEBVTT 0 00:00.290 --> 00:07.790 Yep, I know this is yet another challenge working with yet another output element and listening for 1 00:07.790 --> 00:10.070 yet another oninput event. 2 00:10.070 --> 00:12.350 But there's a reason for my madness. 3 00:12.350 --> 00:17.480 There's a reason I'm repeating these things, and that is for you to become more intuitive and feel more 4 00:17.480 --> 00:21.770 comfortable when it comes to you designing your own apps and forms. 5 00:21.770 --> 00:25.430 So here is another type of input control. 6 00:25.430 --> 00:30.920 I wanted to show you that we don't only have to listen to the oninput event where the input type is 7 00:30.920 --> 00:36.440 text because here is a clear example of us using an input where its type is set to ... 8 00:36.470 --> 00:37.400 what type is this? 9 00:37.400 --> 00:38.180 Can you guess? 10 00:38.240 --> 00:38.740 Booyah. 11 00:38.750 --> 00:39.680 That's right. 12 00:39.710 --> 00:44.840 Its type is set to range. And you already know one of the major downfalls with working with the input 13 00:44.840 --> 00:50.600 of type range is the value itself is not displayed to the user until it's submitted in the form. 14 00:50.600 --> 00:55.550 And that's just impractical, which is why I want to go through this example with you. 15 00:55.550 --> 00:58.190 I want us to create this input of type range. 16 00:58.490 --> 01:04.590 I want you to create an output element and I want the value of that range to be shown in that output 17 01:04.590 --> 01:05.100 element. 18 01:05.100 --> 01:08.850 And yes, we're going to be listening for the oninput event. 19 01:09.510 --> 01:16.500 So let me show you. Here it is. Here is the slider. As we move the slider, the value is shown to the user. 20 01:16.800 --> 01:18.420 Very, very simple example. 21 01:18.420 --> 01:20.670 See if you can do it by yourself. 22 01:20.670 --> 01:25.260 If you can't, don't worry, I'm going to be going through it with you in the very next lecture. 23 01:25.410 --> 01:26.040 Adios 👋.