Alright, let me hop into my Range Rover.
No, not that kind of range.
I'm talking about the type of range.
Range Rover is a type of vehicle here.
I'm not sure if you've got it where you are, but anyway, that was just a dad joke, nothing more,
nothing less.
Anyways, now I'm talking about the input where it's type attribute is set to range.
What is this all about?
Well, it's an alternative way to using inputs of type number, but it's mostly used when the user doesn't
really care about the exact value.
So really, sliders are useful when the user doesn't really care about the accuracy or about the exact
value of the number.
In other words, usage wise sliders are less accurate than text fields and therefore they are used to
pick a number whose precise value is not necessarily important.
So just remember that - there are a "range"
see what I did there ðŸ˜¹, of useful scenarios where you'd want to use the range type.
In other words, there are a number of cool uses you can do with it.
For example, you often see these ranges on house buying sites where you want to set a maximum property
price to filter by.
For example, what is your budget for a house?
Range fields might also be useful for those questions on forms like, how likely are you to recommend
this product to your friend, with likely at one end and unlikely at the other, for example.
Or another question, how do you rate this course? So you can see these precise values might not be that
important,
and in these cases, ranges can be very, very useful.
But enough said.
Let's hop over to the console and see it in action.
Let's look at a very, very quick slider example.
As always, we start with HTML. We can have a head and then a style section.
And of course in our body we want to create a form.
There's no action required. And in our form, let's create a label ... "for" let's just have it as price and
we're going to ask the user to choose a maximum house price.
Right.
Let's refresh the browser.
And there we go.
Of course now, we need our input and this time of type range.
First time we've used it.
How cool.
And you can see already visually the browser has inserted a range widget.
Wow.
Very, very cool.
The name can be price.
Its ID has to match up to the "for" attribute of the label, which is also price.
Just in terms of styling, let's center this.
So all I want to do is grab our body.
Very quick way is we can max-width the body to 500 pixels and then we can center it.
There we go.
Just so you can see it better.
We can actually zoom in slightly as well.
How's that?
What I want to do on this input type, right,
I want to set parameters. And remember I said the three most important attributes for this are minimum.
So let's just say it's $50,000.
The maximum can be $500,000.
The step can be, and this is the increments, right,
every time you hit the right or left arrow on your keyboard, let's step up by $1,000 and let's have
a value of call it $250,000
as a starting point.
The first thing I want you to see, is that visually nothing happens, right?
We've got this maximum house price.
We don't know what it is. And you can move the slider, but you can't see anything.
That's the first hindrance.
Secondly, there is no way to see the value until you submit the form.
So if we go to our coding editor here and we just add a button of type submit.
Submit.
Right.
If we move this now and we submit, then we see the price. Here,
it's $402,000.
But until you hit submit, you don't know what it is.
And that's why I was telling you that, you know, if the value is not that important, you generally
want to use this range widget.
But when value is very important, you actually need to visually display that result to the screen somehow.
But before we jump into that, I just wanted to show you how easy it was to code up a range.
Pretty cool, right?
So there we go.
We saw it in action.
We saw how important it is to configure your slide properly.
That is, to set the min, max and step attributes.
It's very, very important.
But there was a major downside, wasn't there?
And that is, the range type doesn't provide any visual feedback to the user.
We could only see its value when the submit event was fired on the form.
But don't panic, my dear students, there is a solution and that is we can grab the value, for example,
using JavaScript and then we can display it to the user in an output element.
What?
Don't stress.
Let's hop over to the coding editor and let me show you this in action.