Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing component done by Vanilla JS

P
Hana 910

@Hanka8

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys.

This was very challenging for me as I was struggling with writing proper JS code to make all the components as functional as they should be. It was hard figuring out how to change text values not only by clicking the toggle button, but also by changing values on the input bar.

Other hard thing for me was figuring out how to style the input range properly, after all I solved it by creating 2 divs underneath the input slider. Is there any better solution?

My code looks like a mess at the end, but the solution seems good.

Any suggestions are welcome!

Edit: The input bar is displayed differently in firefox and chrome, any suggestions how to solve cross-browser problems?

Edit 2: I added some -webkit- properties and now it seems to work at all browsers, if anyone is struggling with styling the range bar i reccomend this article

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord