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

Interactive pricing component solution with SCSS

#sass/scss
Abhik 4,840

@abhik-b

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


👋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 🤞

Community feedback

Anthony 355

@ACdev27

Posted

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

1

Abhik 4,840

@abhik-b

Posted

@ACdev27 Yes it is very hard indeed & I agree I also haven't seen it getting used in real world

1
Anthony 355

@ACdev27

Posted

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.

1

Abhik 4,840

@abhik-b

Posted

@ACdev27 Thanks a lot Anthony for the feedback I will try your suggestion

0
Abhik 4,840

@abhik-b

Posted

@ACdev27 Hi Anthony actually I updated my solution with your suggestion can you please check that out & let me know how it is now ?

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