Submitted over 2 years ago

Interactive pricing component

Akimb• 250

@NerijusNoreika

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive pricing component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Made with Vue along with Grid and Flexbox and SCSS.

Most annoying part was the range styling.

Feedback is always appreciated! ;)

Community feedback

Sam Guliker• 540

@Sam-Guliker

Posted over 2 years ago

Hi, Nerijus

Looks good but there are a couple of things design-wise that needs some attention.

The text on the bottom left should be aligned left.
Where did the discount go?

Happy coding

Akimb• 250

@NerijusNoreika

Posted over 2 years ago

@Sam-Guliker I changed the discount logic by design. The toggle slides to the right, instead of left for discount ;) To me it looked better

For text alignment, my bad, I noticed that on mobile it should be aligned center, and did not account for desktop version. Thanks for observation :)

Elroy Toscano• 630

@elroytoscano

Posted over 2 years ago

Well done. Pixel perfect design. Whenever you use form elements, use a label tag as it facilitates accessibility.

Download AXE dev tools so that you can clear any accessibility issues while coding : https://www.deque.com/axe/devtools/

Please log in to post a comment

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