WEBVTT 00:00:07.740 --> 00:00:14.430 In this video are we going to learn how to use the query you are to create slides slides are used to 00:00:14.540 --> 00:00:23.220 put a numeric value using a handle that we can move with that with a mouse or even using the arrow keys 00:00:23.500 --> 00:00:23.920 . 00:00:24.090 --> 00:00:28.470 OK so let's create our first slider. 00:00:28.690 --> 00:00:33.150 So we need to create a div 00:00:37.820 --> 00:00:39.340 that's free will. 00:00:39.600 --> 00:00:41.910 So we give you an ID. 00:00:42.010 --> 00:00:43.210 Is called slider. 00:00:43.540 --> 00:00:44.530 OK. 00:00:44.610 --> 00:00:52.050 And we can access these elements using its ID which is Slider. 00:00:52.620 --> 00:00:56.600 And then we get to use a method called Slider. 00:00:56.620 --> 00:00:58.490 It's straightforward. 00:00:59.130 --> 00:01:07.470 OK so if we refresh the page we can see that we've got a slide there so we can use the handle and move 00:01:07.470 --> 00:01:08.950 it using the mouse. 00:01:09.030 --> 00:01:14.320 Also we can move it using the arrow keys. 00:01:14.370 --> 00:01:21.210 OK so now let's create a label for our slider. 00:01:21.210 --> 00:01:32.880 So we going to do on the label use the full prophecy for slider. 00:01:33.510 --> 00:01:34.060 OK. 00:01:34.290 --> 00:01:38.330 So let's put some text for the labels of value. 00:01:39.160 --> 00:01:40.410 OK. 00:01:40.980 --> 00:01:47.400 And now we're going to have the value of the numeric value because of the label. 00:01:47.400 --> 00:01:50.930 So a way to do that is to have any puts in here. 00:01:51.610 --> 00:01:54.670 And once we start sliding. 00:01:54.870 --> 00:02:01.230 Every time we slide we can change the value of these inputs depending on the position of the handle 00:02:01.230 --> 00:02:02.110 . 00:02:02.130 --> 00:02:03.720 All right. 00:02:03.720 --> 00:02:09.350 So let's create our inputs. 00:02:13.020 --> 00:02:15.450 It's going to be text. 00:02:16.440 --> 00:02:22.730 And also it is us an I.D. So we're going to need in the code. 00:02:22.800 --> 00:02:28.550 All right this input is going to be read only. 00:02:28.650 --> 00:02:31.690 We don't allow the user to input anything there. 00:02:31.710 --> 00:02:36.720 There is a property that we need for that's it's read only. 00:02:37.010 --> 00:02:44.460 OK so if you specify which you add this keyword into two inputs tag. 00:02:44.700 --> 00:02:50.240 This means that the user will not be allowed to input any value in that. 00:02:50.250 --> 00:02:57.000 OK and we're going to use code to affect any values to these inputs we can silence as well. 00:02:57.000 --> 00:03:06.430 So it's of some stunning that the full inputs. 00:03:06.780 --> 00:03:11.170 So that's a good point. 00:03:11.250 --> 00:03:16.520 Caller go will you. 00:03:16.860 --> 00:03:17.190 And 00:03:21.180 --> 00:03:24.000 we're going to take the vote as well. 00:03:25.050 --> 00:03:25.650 OK. 00:03:25.710 --> 00:03:32.250 Also is a font weight. 00:03:32.250 --> 00:03:34.670 Bold. 00:03:34.740 --> 00:03:43.320 Now we're going to add a prop. Oh slider because we want the inputs to change depending on the position 00:03:43.620 --> 00:03:44.670 of the hand. 00:03:44.730 --> 00:03:54.510 So the property we're going to use here is going to be slight and what we need to right here is a function 00:03:54.540 --> 00:04:00.000 as we go into executes every time we move the handle. 00:04:00.870 --> 00:04:09.200 So we're going to define a function but this time this function is going to have promises the events 00:04:09.300 --> 00:04:11.210 and you want objects. 00:04:12.000 --> 00:04:17.490 OK. 00:04:18.240 --> 00:04:18.510 All right. 00:04:18.510 --> 00:04:23.220 So we're you going to do we can access our inputs using its ID 00:04:27.110 --> 00:04:37.260 and we will set the value of this input to the value of our slide. 00:04:37.760 --> 00:04:38.780 OK. 00:04:38.850 --> 00:04:47.840 At the moment the slide doesn't have any mean value or max value so it doesn't make sense at the moment 00:04:48.750 --> 00:04:56.790 to affect any value or expects this lady's to have any value the let's just go for that. 00:04:57.210 --> 00:05:09.240 For now let's just say it's the value to you why don't value so you I don't value refers to the value 00:05:10.140 --> 00:05:11.630 of the slide. 00:05:11.870 --> 00:05:16.270 OK so if we do this let's see what's going to happen. 00:05:16.300 --> 00:05:24.840 So if you move the handle by default the value is zero and the max value is 100. 00:05:25.420 --> 00:05:26.900 OK we can change does. 00:05:26.910 --> 00:05:38.090 If we want if you want to so we can set the mean value and max value by adding other properties so the 00:05:38.100 --> 00:05:47.160 mean is the mean the mean is going to give us the minimum value and the monks are going to give the 00:05:47.160 --> 00:05:49.320 max value. 00:05:49.320 --> 00:05:54.100 So we can go 0 for that and 25 for the Max. 00:05:54.360 --> 00:05:54.840 OK. 00:05:55.100 --> 00:05:57.780 Now this is going to change. 00:05:57.780 --> 00:06:03.690 So the maximum is 25 and the minimum is zero. 00:06:04.270 --> 00:06:05.780 OK. 00:06:06.090 --> 00:06:10.470 All right. 00:06:10.470 --> 00:06:17.880 We can also make sure that our inputs are at the beginning is not empty because the resource is empty 00:06:17.880 --> 00:06:18.360 . 00:06:18.360 --> 00:06:20.150 So you can just set it to zero if you want to. 00:06:20.160 --> 00:06:33.000 So just by selecting the inputs using its ID and just setting its value to zero at the beginning. 00:06:33.600 --> 00:06:37.930 So now if you refresh the page we can see that at the very beginning is zero. 00:06:38.000 --> 00:06:41.560 And once we saw slating we can see the value changing. 00:06:41.690 --> 00:06:44.110 All right. 00:06:44.180 --> 00:06:46.640 OK. 00:06:48.810 --> 00:06:54.180 So thats how we create a is with single dose. 00:06:54.180 --> 00:07:02.100 Now we are going to move to slider's with double with two handles which will be present. 00:07:02.400 --> 00:07:05.990 Usually a range of values. 00:07:06.060 --> 00:07:11.730 Okay so rather than having only one value we are going to have to handles and we can have a range between 00:07:11.730 --> 00:07:16.830 the first volley and the second value probably with the first hurdle and second value it is second hand 00:07:16.850 --> 00:07:17.460 . 00:07:18.030 --> 00:07:20.330 Great. 00:07:20.490 --> 00:07:26.130 All right so were going to create another dip for the second slider. 00:07:26.910 --> 00:07:37.660 We can just copy paste the first did with the label as well and the input. 00:07:39.030 --> 00:07:40.230 Okay so the second slider 00:07:43.290 --> 00:07:48.390 going to give us an ID range Slater. 00:07:49.740 --> 00:07:51.120 Okay. 00:07:52.050 --> 00:07:59.380 And so they say that we have inputs for a range of mileage. 00:07:59.580 --> 00:08:07.040 So Id say we were having a website where the user can look for a car to buy. 00:08:07.200 --> 00:08:14.270 They want to look for a car with a certain mileage between within a certain range. 00:08:14.260 --> 00:08:14.810 OK. 00:08:15.210 --> 00:08:26.880 So our label is going to be mileage and the inputs is going to be taxed and are going to give it an 00:08:26.880 --> 00:08:29.580 ID as well. 00:08:29.720 --> 00:08:34.670 Its called mileage on my age range. 00:08:34.850 --> 00:08:35.490 Okay. 00:08:35.610 --> 00:08:39.780 Similar to what weve done with the first slide. 00:08:40.010 --> 00:08:49.580 We going to access the slide in the code and are going to use the same method to access the slider using 00:08:49.590 --> 00:08:56.550 its ID which is range slider that will use the slider method. 00:08:57.410 --> 00:08:57.990 All right 00:09:01.110 --> 00:09:05.780 this time we have a arr. slide. 00:09:05.790 --> 00:09:09.390 So we are going to need a property to the browser. 00:09:09.380 --> 00:09:14.340 This is not a single handle slider but it has a range slider. 00:09:14.490 --> 00:09:18.760 So the property is the range that we need to set to true. 00:09:19.690 --> 00:09:23.440 OK so if we do that refresh the page. 00:09:23.710 --> 00:09:28.090 Now we can see that weve got two handles that. 00:09:28.450 --> 00:09:39.570 Okay and the inputs that we expect expecting all the inputs here is giving us a range. 00:09:39.570 --> 00:09:44.610 OK so we have a range between that value and that value. 00:09:44.610 --> 00:09:51.300 OK OK so let's sits a min and max for our slider as we did before. 00:09:51.810 --> 00:09:54.300 So does this mean to 00:09:57.000 --> 00:10:06.070 0 0 miles and the max two hundred thousand miles. 00:10:06.950 --> 00:10:14.140 OK we can set the initial value of our slides. 00:10:14.160 --> 00:10:24.540 So rather than having the range saucing us zero to zero so we can have a range in initial range between 00:10:24.690 --> 00:10:26.860 0 and 10000 miles for example. 00:10:27.010 --> 00:10:27.490 Okay. 00:10:27.750 --> 00:10:38.530 So the property is values and we are going to say that to a range like that you use an array. 00:10:38.970 --> 00:10:40.690 So first value is 0. 00:10:40.690 --> 00:10:43.200 And the second one ten thousand miles. 00:10:43.200 --> 00:10:44.370 All right. 00:10:44.700 --> 00:10:46.780 So check. 00:10:46.890 --> 00:10:51.680 So now we can see that we start seeing a rate between zero and 10000. 00:10:52.200 --> 00:10:52.730 OK. 00:10:53.000 --> 00:10:57.540 Now we're going to add our slide function as we did before. 00:10:57.780 --> 00:11:08.070 So we're going to do is we're going to make sure that when we slide the handles our range is shown inside 00:11:08.120 --> 00:11:09.290 the inputs. 00:11:09.640 --> 00:11:10.230 Okay. 00:11:10.400 --> 00:11:16.090 First of all let's just style our inputs as we did for the first one. 00:11:17.730 --> 00:11:23.440 Our inputs this time is mileage range. 00:11:25.260 --> 00:11:25.970 Okay. 00:11:25.980 --> 00:11:28.560 It's just odd it's 00:11:32.350 --> 00:11:33.100 okay. 00:11:33.200 --> 00:11:41.630 So we signing both the body and the mileage range it is on some margin margin bottom to the Microsoft 00:11:41.680 --> 00:11:46.780 do it looks better. 00:11:48.830 --> 00:11:50.620 Okay that's better. 00:11:51.620 --> 00:11:52.920 Okay. 00:11:52.920 --> 00:11:56.790 So are you going to set our slide property. 00:11:57.260 --> 00:12:07.290 So again we are going to need a function function with the event and joy objects and let's writes the 00:12:08.070 --> 00:12:10.590 code we need inside our function. 00:12:10.860 --> 00:12:12.820 So so we're going to do. 00:12:12.830 --> 00:12:14.240 We're going to. 00:12:14.430 --> 00:12:17.840 So every time we slide we are going to access the inputs. 00:12:17.850 --> 00:12:25.810 OK so let's say X is the input using its ID which is the amount which is mileage range. 00:12:26.720 --> 00:12:27.240 OK. 00:12:27.270 --> 00:12:33.860 And we got to change the value of these inputs. 00:12:36.050 --> 00:12:37.480 OK. 00:12:37.500 --> 00:12:38.280 So first 00:12:42.600 --> 00:12:46.210 we're going to need the first value. 00:12:46.270 --> 00:12:49.710 Let's let's just writes a sample of how it's going to look like so. 00:12:50.150 --> 00:12:56.030 So if we know our range let's say the range is between 0 and 10000 miles. 00:12:56.580 --> 00:12:58.860 And he's going to look like this. 00:12:58.860 --> 00:13:08.280 So he's 0 miles space minus nine ten thousand miles. 00:13:08.280 --> 00:13:08.690 OK. 00:13:08.790 --> 00:13:12.050 This is tested first even if it's a fixed value. 00:13:12.570 --> 00:13:13.290 They say it's working. 00:13:13.290 --> 00:13:17.690 So once we starts sliding we can see the Vadi that it looks all right. 00:13:17.750 --> 00:13:23.830 So now we want the values to change according to the position of the handles. 00:13:23.880 --> 00:13:29.490 So rather than zero we need to access the position of the first hurdle. 00:13:29.970 --> 00:13:32.890 So are we going to do. 00:13:32.890 --> 00:13:34.040 We're going to break this 00:13:34.370 --> 00:13:42.620 . 00:13:47.310 --> 00:13:47.580 OK 00:13:50.520 --> 00:13:50.800 . 00:13:51.050 --> 00:13:56.530 Plus 10000. 00:13:58.100 --> 00:14:04.680 That's right. 00:14:06.300 --> 00:14:07.060 All right. 00:14:07.320 --> 00:14:09.650 Well can rather than zero and 10000. 00:14:09.990 --> 00:14:13.740 So the first value is going to be you only 00:14:16.440 --> 00:14:18.620 that values. 00:14:19.140 --> 00:14:20.130 OK. 00:14:20.150 --> 00:14:22.170 And as we know the value isn't there. 00:14:22.200 --> 00:14:28.440 With 2 or two values we're accessing the first value which is the elements of index 0 in our array. 00:14:28.670 --> 00:14:33.590 So the initial value is the initial values are 0 and 10000. 00:14:33.620 --> 00:14:39.730 So we're just accessing values inside the objects. 00:14:40.110 --> 00:14:40.940 Okay. 00:14:41.550 --> 00:14:46.360 And as values is an array we just need the index of the value that we need. 00:14:46.400 --> 00:14:49.050 So the first one is the elements of index 0. 00:14:49.290 --> 00:14:49.890 Okay. 00:14:50.280 --> 00:14:57.380 And then the second one is you are the values one. 00:14:58.060 --> 00:14:59.950 Okay. 00:15:01.720 --> 00:15:05.870 Okay let's try this and make sure it's working. 00:15:06.070 --> 00:15:07.420 So if you saw sliding. 00:15:07.980 --> 00:15:09.110 So we can see. 00:15:09.120 --> 00:15:12.530 Second of all you can see also the first by changing. 00:15:13.170 --> 00:15:13.970 Okay. 00:15:14.320 --> 00:15:22.620 So it's a little bit more very good to have the miles going or increasing by 1. 00:15:22.770 --> 00:15:30.480 Usually if you go to our Web sites where you look for cars to buy and you want to select the might is 00:15:30.480 --> 00:15:36.140 usually you have course the values increasing by something like a thousand miles. 00:15:36.690 --> 00:15:38.540 So we need a property for that. 00:15:38.550 --> 00:15:46.770 It's called step and we can say that's a 1000 which means that we are increasing or decreasing by 1000 00:15:46.770 --> 00:15:47.980 every time. 00:15:48.810 --> 00:15:51.450 OK it's a coma. 00:15:53.520 --> 00:16:02.070 OK so now we can see it's better and it's working. 00:16:03.600 --> 00:16:06.370 All right. 00:16:06.940 --> 00:16:11.970 At the beginning we don't have any value there so we can make sure that we've got 00:16:14.940 --> 00:16:19.970 our initial view that's what is going to use the same code that we used here 00:16:23.480 --> 00:16:26.190 outside I the method 00:16:31.120 --> 00:16:36.990 but we're just going to access the values. 00:16:37.380 --> 00:16:39.260 Another use in another way. 00:16:39.510 --> 00:16:49.480 So the first value we're going to access is it's by first accessing the slider using its ID. 00:16:51.100 --> 00:16:51.920 Okay. 00:16:52.350 --> 00:16:54.700 And then we're going to use the slider method. 00:16:56.010 --> 00:17:00.900 And then we can have a couple of promises there. 00:17:00.960 --> 00:17:04.740 So the first one is which property we're looking at. 00:17:05.120 --> 00:17:06.390 It's values. 00:17:06.410 --> 00:17:11.780 And the second one is the index of the array. 00:17:12.170 --> 00:17:12.950 Okay. 00:17:13.400 --> 00:17:16.130 So the second value is going to be the same. 00:17:16.160 --> 00:17:23.460 So rather than using the UI objects we're using the same code but this time we're looking at index 1 00:17:23.470 --> 00:17:23.930 . 00:17:24.370 --> 00:17:27.190 All right so let's just make sure it's working. 00:17:27.200 --> 00:17:28.280 Yes it is working. 00:17:28.290 --> 00:17:35.610 So initially this is the initial value and once we start sliding we can see the values changing. 00:17:36.470 --> 00:17:37.380 OK. 00:17:37.400 --> 00:17:42.610 So in the next video we're going to look at a little bit more which it's