1
00:00:01,210 --> 00:00:09,760
Hello, in this video, we are going to take a look at the range component for our form, so a range

2
00:00:09,760 --> 00:00:14,210
is basically a Loida that allows you to select a value.

3
00:00:14,440 --> 00:00:16,380
So this is great.

4
00:00:16,390 --> 00:00:23,470
If, for example, if you are selecting how many of something maybe you put in a website where you can

5
00:00:23,470 --> 00:00:30,070
order items, maybe the items are cans of tuna and you can use a slider and maybe the minimum obviously

6
00:00:30,070 --> 00:00:35,250
of zero for the order and maybe you only allow a maximum order of one hundred for that.

7
00:00:35,420 --> 00:00:43,630
So this one use case number use case is it could be used to toggle the brightness of something, anything,

8
00:00:43,630 --> 00:00:44,180
really.

9
00:00:44,530 --> 00:00:48,430
So to do a range, it's really simple to implement.

10
00:00:48,460 --> 00:00:51,210
So first of all, all implement this device.

11
00:00:52,330 --> 00:00:57,340
You know, they're all essentially encapsulates our component.

12
00:00:57,350 --> 00:01:00,250
This is optional basis, a great way of formatting things.

13
00:01:00,580 --> 00:01:08,290
And so the rain, like said it a I think one of the simplest components that you can implement in a

14
00:01:08,290 --> 00:01:09,770
form is still pretty cool.

15
00:01:10,180 --> 00:01:16,440
First of all, we're going to have a label and this is great to provide some contextual information

16
00:01:16,900 --> 00:01:17,200
on.

17
00:01:17,470 --> 00:01:19,530
I'm going to put custom range.

18
00:01:19,900 --> 00:01:27,430
This is going to be the idea of the input range component, which will be created shortly.

19
00:01:27,820 --> 00:01:34,120
And we're going to have a class of form that's labeled to keep it all consistent.

20
00:01:34,510 --> 00:01:36,850
And what is going to say example?

21
00:01:38,530 --> 00:01:46,980
OK, so now what we're going to do is have the input and the input is on the type of range and I have

22
00:01:46,980 --> 00:01:59,270
the class of called range and it's going to have an I.D. and the OED will be this right here.

23
00:02:00,310 --> 00:02:07,480
OK, the Warshel say this is the same as the not the equation is the same thing for reload.

24
00:02:07,480 --> 00:02:09,010
We get this range.

25
00:02:09,040 --> 00:02:09,730
That's pretty cool.

26
00:02:09,760 --> 00:02:11,260
We can move Escott increments.

27
00:02:11,920 --> 00:02:25,380
We can also set a min and max value so we could do min equals zero and Max equals like so.

28
00:02:29,990 --> 00:02:35,930
And as you see, we can click somewhere and you'll go to the nearest one, you know, whether it's going

29
00:02:35,930 --> 00:02:39,110
up one or slightly down from where we click, but that's all it is.

30
00:02:39,380 --> 00:02:49,490
And we can also specify the step as well for the step just basically indicates, you know, the intervals

31
00:02:49,820 --> 00:02:56,540
they go to the start is zero two, four, six, eight and 10.

32
00:02:56,870 --> 00:03:02,060
And the last one is ten because we have a max of ten for the step of two.

33
00:03:02,060 --> 00:03:07,640
But I did want to know are technically 50 different steps.

34
00:03:08,700 --> 00:03:15,090
But each one, increasingly by two, you can obviously use JavaScript to get the value of this range

35
00:03:15,090 --> 00:03:17,370
and I highly recommend that you do that the next task.

36
00:03:17,880 --> 00:03:23,880
One of the other thing I want to show you, and by default, it puts it in the center, was close to

37
00:03:23,880 --> 00:03:30,510
the center that it can depending on what the step range is to eliminate.

38
00:03:30,510 --> 00:03:37,500
That's if you want to at a particular point, let's say, to start, which is very common value equals

39
00:03:37,680 --> 00:03:40,490
zero, which will be at the start the.

40
00:03:40,860 --> 00:03:43,800
So that is range is basically a slider.

41
00:03:43,960 --> 00:03:46,860
If you have any questions, feel free to put me a message.

42
00:03:46,860 --> 00:03:50,790
And as usual, I look forward to seeing you in the next video.