Skip to content
Submitted almost 2 years ago

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

Sebastian•510
@sebix0nus
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive pricing component
  • HTML
  • CSS
  • JS
2junior

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,390
    @nelsonleonePosted almost 2 years ago

    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

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