All right, my dear students, I'm going to be going a little bit faster because I think you're getting
used to this by now.
Okay, here we've got a blank index file open.
Let's start with HTML.
Here, we need a head section. In here,
let's have a title "Custom Range Design".
It's going to be really fun.
This challenge, I can't wait.
I can't wait.
And then let's link to our CSS file.
Just because it's going to be quite large and I want to call it styles.css.
That's all we need.
And then let's define a body. Within our body,
you know what?
I won't even add a form here, you know, because it doesn't matter where you put this on your app,
you know, it could be anywhere.
But as you know, I always love wrapping things in a wrapper when it comes to CSS, it's so much easier.
So let's define a div and we can give it a class of wrapper. In here,
want to define our range input type.
That's the first thing I want to do.
How do we do that?
That's right.
Very, very easy.
We define the input HTML element with its type attribute set to range.
Very, very simple.
We can ... we actually don't need a name here.
We're not submitting anything to a server.
And let's give it an ID of "range" because that's what it is.
If we save that, refresh the browser, you can see this is the standard, you know, default styling,
the browser gives it. Pretty straight forward. But I want to give it a minimum value of say, 0, and a maximum
value of 1000.
And let's give it a default starting value of 500.
Right.
So it starts in the center.
Makes sense.
The next thing we're going to have to do, is we're going to have to create an output element because
remember, by default, the value of the range is not shown to the user until he or she submits the
form.
And we don't want that.
We want to show it dynamically.
And as the introduction challenge video showed, we want to show that value in a cool little style widget,
if you want to call it that.
Let's code up this entire kind-of output in the HTML <output> element.
It can be empty for now, right?
It's going to be dynamic.
Let's give it a class so we can style it and the class name can be anything.
Let's just call it rangeValue because we're going to be showing the value of the range attribute ...
sorry, we're going to be showing the value of the range widget in this output element. And let's give
it an ID, we can give it an ID of ... just in case we need it later,
I'm not sure what we'll be doing in CSS yet,
we'll just wing it as we go along.
And I think my dear students, this is it for the HTML, right?
Very, very straightforward.
See, I told you there's not much to it.
But we're not done, are we?
Because I want us to now start styling this up with some CSS.
So let's go to our CSS file. Again,
it's empty, so let's get cracking.
First thing I like doing is I like removing the default margins that the browser applies to your page.
It's just irritating.
Later on when you get more complicated, you can't figure out why things aren't quite aligned, and
normally it's because of the default styling.
So let's target the body first.
And let me just say here, for your own knowledge browsers add 8 pixels of margin by default.
Let's remove this.
So let's give it a margin of zero.
You can see the browser is already affecting the styling.
Now I just want to set the minimum height of our entire page to 100vh.
This will actually will only affect it later.
"vh" in case you're wondering, is just a property
related to the actual viewport itself.
So we want the height to be the entire viewport.
That's all I'm saying here.
I want to align-items to the center.
Um, padding,
let's set the top and bottom padding to zero.
And then what we can do is we can set the left and right to 10% of the viewport size.
Yeah, I think that makes sense.
I think that makes sense.
And of course, you know me by now,
like the flex layout, and we can justify content to the center.
There we go.
So this is what our range widget has now become.
How cool.
All right, let's keep going.
Let's keep going.
What I want to do now is I want to target the input with its type attribute set to range.
What do I want to do here?
Well, let's apply some margin
to the top and bottom, and then zero to left and right.
"r",
margin.
Okay.
And then the width, we can give it 100%.
Okay, my dear students, how do we now target the actual range itself and apply CSS to it?
Let me zoom in a bit.
Let's inspect this widget.
All right.
If we inspect the actual range widget itself, can you see in the shadow-root,
don't worry about what that means,
but basically we are given this by default by the browser, and the browser has applied a property called
webkit-slider-runnable-track.
Can you see it?
And if we open that up, that's where the styling comes from.
So what we want to do is we want to target that webkit-slider-runnable-track pseudo element and we
want to affect the styling on that. So we can go to our file here,
let's just remove this for now, place it to the right and we want to target our input with type of
range, but this time we want to target the pseudo element, right?
And we know it's called webkit-slider-runnable-track.
And this is what's really cool.
We can now apply custom styling to it.
Let's just say the height is 7 pixels.
Let's say the cursor is a pointer, so the user knows it's kind-of a range selector.
We can change its background.
Let's just give it #2998cc.
How cool is that looking,
students?
You can see it's, you know, being applied in real time.
Very, very cool.
And then I don't like those square borders.
And in order to round it, we just apply a border-radius property and that we can just set to 50 pixels.
There we go.
Nice and round.
We can do exactly the same thing, my dear students,
but now we can target the webkit-slider-thumb. And that will apply styling to that little round thumb.
Effectively this round button that moves up and down.
So again, we want to target the input where its type is set to range.
But this time, you guessed it, we're going to target the pseudo element of webkit-slider-thumb.
And again, let's apply a border-radius to this of 100%,
so it is round.
I guess we didn't really need to do that.
It is round already.
Let's give it a nice box-shadow, shall we?
Box
shadow, 0 0 5
pixels, 0,
and 1.
Yeah, I think it looks cool.
I'm quite zoomed in yet.
Let me just zoom out a bit.
There we go. Again,
we can do cursor:pointer. What we can do,
look here,
if I zoom in, can you see there's a slight white background?
I don't want that there.
I actually want to remove that slight white background.
So in order to get rid of that white background, let's change its background property.
I guess it doesn't really matter.
Here, let me just go blue.
Yeah, there we go.
And then I want to just push it up a little bit.
So let's just say margin top -5 pixels.
There we go.
How cool does that look?
So we've already custom designed part of the range picker.
How awesome.
Now what's really cool, my dear students, is that you can target, or you can use, different CSS class
selectors and pseudo elements in one.
So for example, if we wanted to change the range sliders color when it's in focus, we can do so and
it is super, super easy.
All we have to do again is target the input where it's type attribute is set to range.
Here we only want to change styling when it's in focus, and we want to target the webkit,
sorry
one dash, webkit-slider-runnable-track.
And we want to change the background color here.
And we can do it to #1f759c.
Now, when it's in focus, can you see how it's darker when the user checks out of it and it's out of
focus, it reverts back to its default background color.
How awesome.
All right.
The next thing I want to affect is the wrapper.
If we go to our index page, we've got this wrapper class with everything in it.
Why don't we just grab this wrapper class,
and define a width of, say, 500 pixels and change its position property to relative.
Just easier for us to move things around a bit later, as you'll see shortly.
So there we go.
That's our wrapper.
We've just made our widget a bit bigger.
Okay.
Everything else still applies.
It's still all working, which is good.
Now I want to get into the tricky bits and that is ... I say, tricky.
It's not that tricky.
It's just, you know, we've got to apply our mind a little bit.
I want to define the styling of this output, right, where its class is set to rangeValue because right
now when we are scrolling this, we can't see the value in any way.
So effectively I want to apply styling so we can see the value.
And how do we do this?
That's right.
We target the ::before pseudo element.
So, let's start working on it.
Okay, let's save this and let's start working on the actual range value.
So, let's make its position absolute because then we can be very specific where we want that output to
be.
Do you know what?
I'm actually going to stop here.
Yeah, I think I think that's best.
Let me stop here.
What I want to do, I know in our index file, we've got this output here, okay?
It's empty at the moment.
I want us to use JavaScript.
I want to add a dynamic span element and I want us to put the value in that span element.
And that's why I want to stop here.
Even with the styling of the CSS, let's first do the JavaScript together, let's add that element and
then we can style it and we can see how that works.
Okay, so take a break, take a stretch and I'll see you in the next solution video - the final solution
video for this challenge.