Hello, in this video, we are going to take a look at the range component for our form, so a range
is basically a Loida that allows you to select a value.
So this is great.
If, for example, if you are selecting how many of something maybe you put in a website where you can
order items, maybe the items are cans of tuna and you can use a slider and maybe the minimum obviously
of zero for the order and maybe you only allow a maximum order of one hundred for that.
So this one use case number use case is it could be used to toggle the brightness of something, anything,
really.
So to do a range, it's really simple to implement.
So first of all, all implement this device.
You know, they're all essentially encapsulates our component.
This is optional basis, a great way of formatting things.
And so the rain, like said it a I think one of the simplest components that you can implement in a
form is still pretty cool.
First of all, we're going to have a label and this is great to provide some contextual information
on.
I'm going to put custom range.
This is going to be the idea of the input range component, which will be created shortly.
And we're going to have a class of form that's labeled to keep it all consistent.
And what is going to say example?
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
the class of called range and it's going to have an I.D. and the OED will be this right here.
OK, the Warshel say this is the same as the not the equation is the same thing for reload.
We get this range.
That's pretty cool.
We can move Escott increments.
We can also set a min and max value so we could do min equals zero and Max equals like so.
And as you see, we can click somewhere and you'll go to the nearest one, you know, whether it's going
up one or slightly down from where we click, but that's all it is.
And we can also specify the step as well for the step just basically indicates, you know, the intervals
they go to the start is zero two, four, six, eight and 10.
And the last one is ten because we have a max of ten for the step of two.
But I did want to know are technically 50 different steps.
But each one, increasingly by two, you can obviously use JavaScript to get the value of this range
and I highly recommend that you do that the next task.
One of the other thing I want to show you, and by default, it puts it in the center, was close to
the center that it can depending on what the step range is to eliminate.
That's if you want to at a particular point, let's say, to start, which is very common value equals
zero, which will be at the start the.
So that is range is basically a slider.
If you have any questions, feel free to put me a message.
And as usual, I look forward to seeing you in the next video.