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

Angular 8/CSS Flexbox

@bharath-sampath

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


Tried my best to mimic design and functionality. One thing that is not working is slider fill which i am looking at. Please go over and provide your feedback.

Community feedback

@m0vr4d

Posted

give the outer box some bottom margin and less opacity for the shadow, give the background image a height 50%,

Marked as helpful

1

@m0vr4d

Posted

I think you should use hover instead of active to cast the range thump shadow, I think this can help you with the left range filling https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider it's the box shadow under thump, if you didn't catch it

Marked as helpful

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