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

Price slider with SCSS, BEM workflow and a little bit of vanilla JS.

#bem#sass/scss#vanilla-extract
Sebastian• 510

@sebix0nus

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


I have a problem with the implementation of green slider progress for chrome, in firefox we have the ability to do this via "::-moz-range-progress". In firefox everything works as it should

Is there any way to do something like this in chrome? People have added it through a gradient or in JS, but maybe there is a simpler method?

Community feedback

Nelson• 2,380

@nelsonleone

Posted

HELLO......congrats on completing this challenge...well done 🎊 🎊

Based on your question , see to add ::-webkit-range-progress and remove the default apperance-webkit-apperance:none.

Secondly, you forgot to add an alt text to your image. If the image doesn't send a message(just for design purposes) you can add alt="" and set aria-hidden="true". So screen-readers (AT) won't stress on what it it.

Hope this comment was helpful , have fun coding

0

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