Usins SCSS and ES6 Classes

I wanted to do this challenge to learn how to make a custom range slider and a toggle switch which was much harder than I anticipated. This also seemed like a good project to continue practicing Object Oriented Programing with ES6 classes. I was able to create a slider class and attach methods to it to create the slider functionality and color styling. I had not originally intended to create two slider objects instances but having the ability to create one for mobile and one for desktop was easier than doing a bunch of repositioning with CSS.

I really like this component and it has a lot of useful features that I could use in other projects. One thing I would like to come back and figure out is how to attach the event listener in the class object. I know it can be done but I was having trouble implementing it.

For anyone else looking to do this project I found these articles really helpful. https://css-tricks.com/sliding-nightmare-understanding-range-input/ https://www.w3schools.com/howto/howto_css_switch.asp