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

Interactive pricing component made with Flexbox and Vanilla JavaScript

P

@Eileenpk

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


Another good challenge. The custom style of the range input was good practice. I think I made my JavaScript nice and dry : )

Community feedback

@crsimpson5

Posted

Hey Eileen, great job on your solution! Your code looks great--nice and clean.

One small change you could make is replacing the event listener on the slider from change to input. That way, the event is fired while the slider is being dragged, and the graphics/data will update instantly. The change event only fires when the input is committed, which in this case is releasing the mouse button. It's a tiny change, but it makes a big difference!

Here's the MDN link to read more: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

Marked as helpful

0

P

@Eileenpk

Posted

@crsimpson5 good suggestion I'll make that change 🙂

1

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