Skip to content
Submitted about 2 years ago

Interactive-pricing-component

mohamed yasser amer•610
@mohamedyasser27
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive pricing component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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-bPosted about 2 years 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
    0
    mohamed yasser amer•610
    @mohamedyasser27Posted about 2 years 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

    1

Please log in to post a comment

Log in with GitHub

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