Challenge 5: Mixins 2

[00:00:00]
>> Mike North: If you have an input of type range, we get a slider. We can have a horizontal slider and we can define a min value and a max value and even step values where we can go up by increments or down by increments. It's possible to style this slider, so that it looks like this, instead of what you will get, which varies from browser to browser.

[00:00:24]
The browser defaults are not the same on Safari, or Chrome, or Firefox. There's an awesome article that comprehensively deals with the aspects of styling this input element so that it looks nice like this. But there's no example there for how we do this using Sass. What I would like you to do is start by going to this URL, go to the end of the article where you can grab his complete solution, which is just pure CSS.

[00:00:58]
Then using this idea of Mixins and the content directive and parent selectors, let's see how much we can clean it up. We're gonna have an informal little contest here to see who can shrink this up into not the smallest number of lines possible, but the most maintainable form possible or we're repeating ourselves the least we can get away with.

[00:01:24]
It should start with you pasting stuff into your app.sess file and you should see something that looks like this in the app immediately and then you're gonna want to start iterating on it and cleaning it up a little bit. Extracting things out into variables until time is up and just ensure that it keeps looking that the way it is supposed to look.