Interactive Pricing Component with Vanilla JS, SCSS, and BEM

Although it looks a small project, it had a couple of challenges. Perhaps the biggest challenge was designing the slider. Not because it had a some complex design, but the browser support for these types of things is not perfect. Besides Firefox, there's no other browser that has a support for this ::-moz-range-progress pseudo-element. Otherwise, it would've been possible to design a slider without any JS whatsoever. However, I've learned a lot in this project, especially about sliders and toggle buttons. I feel like by now all browsers should've supported these types of things even without prefixes. I'm glad that at least the range thumb I was able to design with only CSS, although prefixes were present here as well. Furthermore, I hope other browsers will also join Firefox and start to implement such things, so that developers can code these small projects faster and easier without coming up with workarounds.

If you have any suggestions, make sure to leave a comment 👨🏻‍💻 Cheers 👾