Welcome back to yet another challenge.
And I know this ... you know, this course is filled with challenges.
I mean, we've done already a few challenges in previous sections, so it's not all in one place because
sometimes it's more relevant to do a challenge in other areas.
But this is a fun little section, you know, and I'm really, really having a lot of fun.
I hope you are too.
This is going to be a little bit tricky again when it comes to CSS, you know, but this course isn't
about CSS.
It's about teaching you the skills you need to build form widgets.
And once you master CSS, for you to manipulate these widgets will become second nature.
So here we are.
We're dealing with the input of type range and we've custom designed this.
How cool.
You can see it's a different color. When a user focuses on this widget, do you notice the colors change?
It's slightly darker. And when the user moves this range, we've got this output element with numbers and
it follows the actual range button.
How awesome.
Pretty cool, right?
So yes, give it a go.
Give it a try.
Just remember, you know, a few hints.
What I did was obviously wrap everything in a div, so we can style things nicely.
That's why I've put this entire range in the center of the viewport.
And remember, when we're dealing with the range, we don't see the value automatically.
The browser only shows us that value when the user submits the form.
So it's pretty, pretty useless.
Which is why I then created an output element.
And within that output element I dynamically added a span element to put that number.
Right now it's showing us 310. I put that number in that span dynamically with JavaScript.
And then I basically can you see that little triangle on the 310, I styled that with CSS and I targeted
the ::before pseudo element in order to create it.
That's another hint.
And then obviously we need to think about how it can follow the actual form widget itself.
That was a bit tricky.
It's a bit "mathy", but don't worry, I'll explain to you exactly how I got to the numbers.
Give it a go, see how far you can go alone, and then follow me along in the solution videos.
See you now.