Frontend Mentor | Interactive-pricing-component coding challenge solution

Solution retrospective

this one was hard because i couldn't do the progress the bar but using css custom variables along the input event allowed me to create a script that tracks the progress

but a problem i had was the resizing which made the range break so i had to using resize observer to keep it consistent but i don't think it's the right approach but i couldn't come up with a formula in css that doesn't make the progress bar exceed the button on resize

Community feedback

Abhik• 4,840

@abhik-b

Posted over 1 year ago

Hello Mohamed , Your solution looks great & it is very responsive . Great Job done 💯

Just a opinion : Yes you are right , you do not need resize observer. Instead you can use responsive css media queries. What I did was :

create a div .slider-container & made it position:relative.
Then created a label with width :90%; so the label always has 90% width of the parent
Then created a input & hid it's appearance (you have also done the same. However I did not give any position to input , instead I gave it a bg color just like the original design
Then I created a .slider-handle span & .slider-fill span. As the name says 1 is for showing the custom fill & other for custom handle.
Then for large screens I used the css media queries to increase the handle size.

Here is my code

Hope this helps 🤞 & Please keep coding this nice solutions 🥳

Marked as helpful

mohamed yasser amer• 610

@mohamedyasser27

Posted over 1 year ago

@abhik-b a very nice solution and consistent i got dragged down the road of pseudo elements so i didn't try to make it custom so i had to resort to js but very nice thinking ️‍🔥

thanks a lot

Interactive-pricing-component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community