Skip to content
Submitted over 3 years ago

Interactive pricing component solution with SCSS

sass/scss
Abhik•4,820
@abhik-b
A solution to the Interactive pricing component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

👋Hello Frontend Mentors , I am returning to web development after a break of 1 year & I started with SCSS . Please suggest me in which ways I could have done this solution more efficiently & more perfect. I will highly appreciate your feedback 🤞

Code

Please log in to post a comment

Log in

Community feedback

  • Anthony•355
    @ACdev27

    Yes, I think that works better now where when you slide the slider it has 5 distinct positions.

    For myself, this was most difficult challenge I have done so far. The range input is very hard to work with in my opinion. In reality, I don't see it used much on websites, so maybe it is not very popular input to be used in real world.

    Marked as helpful
  • Anthony•355
    @ACdev27

    The slider does not seem to be showing the correct prices as specified by the challenge. Maybe this can be some help... I see in your HTML your input element type="range" has the step attribute set to 10. That creates 10 steps along the slider. For mine I had set this range input element set to step="5" to correspond to the 5 different price points that were specified. So my slider was then only returning values of 1, 2, 3, 4, 5 and that made it easier to work with in the JavaScript. I just did something simple then by checking with switch statement those 5 cases to set each of the five prices.

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