Skip to content
Submitted over 4 years ago

Data-Fylo : HTML, CSS, JS

Rahul Gupta•80
@rahulxyz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

How do we build the thumb of slider more similar to that of design? In my solution there are two issues with the slider:

  1. The thumb is not wrapped with the pink gradient in a curved manner. It is vertical.
  2. The Pink Gradient is moving with the help of slider value. While moving the thumb you can notice the gradient to be a little behind at the start and later it covers its whole thumb.

Community feedback

  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted over 4 years ago

    Hello,

    Very nice solution! The site is responsive and the progress bar is awesome. One thing that you should do is reverse the counter, because when the progress bar is at max value it shows 1000gb left and that, I think, should be 0gb. In rest is all good I think! Good job!

    Happy coding! Keep going!

    3
    Rahul Gupta•80
    @rahulxyzPosted over 4 years ago

    Haha, nice observation. I was so focused on design, missed the functionality. I'll update that. Thank you.

    0

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