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,740

@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

Report

0

Accessibility Issues

0

HTML Issues

View Report

Abhik’s questions for the community

👋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• 375

@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,740

@abhik-b

Posted

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

0

Abhik• 4,740

@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

Anthony• 375

@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,740

@abhik-b

Posted

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

1

Please focus on giving high-quality, helpful feedback and answering any questions abhik-b might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!