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

HTML / Sass / JS – Flexbox / CSS Grid / BEM / Styled input range

@Pustur

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


Is there any way to color the left part of the range input differently than the right part?

I guess a JS-controlled background gradient could work but I wanted something simpler.

Community feedback

P
Grace 27,350

@grace-snow

Posted

Hi Pustur

LOVE this, really great job!!

The only thing I would tweak would be making those input selectors more specific by using class hooks for them. It's just a good habit so you could drop this component into bigger projects and ensure its selecting inputs from. The correct form.

Again, love it

1

@Pustur

Posted

@grace-snow Thanks for the... input. (badum tss 🥁)

I agree I would definitely change my approach in a bigger / more serious project, but for some of these self-contained challenges sometimes I "let myself go" and just use whatever works. 😅

1

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