Mobile first with CSS flexbox, relative and absolute positioning
Design comparison
Solution retrospective
The project is mostly complete but I have some things that I could not done as in design files:
- On the slider thumb in the design files, there are different cursors on hover and thumb grabbing. I put
cursor: grabbing;property on it and works for grabbing but on hover it did nothing. Can someone help me with this ? - For the background of the slider I used
linear-gradientand changed it from JS but it doesn't look so good. Could someone give any advice on how to build it better ?
If someone could help me with the questions above or with general advice on how good I used margins, padding and positioning it would be great. Any other feedback is appreciated !
Community feedback
- @DarkAmdHaPosted over 3 years ago
Hey, awesome job here. You can use the
cursor:grab. You should set the cursor tograbin the hover state and tograbbingin the active state of the slider..slider:hover{ cursor:grab;}and.slider:active{ cursor:grabbing;}Happy Coding :-)Marked as helpful1@iulian-cenusaPosted over 3 years ago@DarkAmdHa Thank you for the suggestion ! I manage to solve the issue. Happy coding !
0 - @Tyson-WellingsPosted over 3 years ago
Hey! Just wanted to say that your background gradient solution is very clever! When I attempted the same challenge I overlapped the slider with divs to take the place of the thumb and slider bar. One div would show the filled areas! The width of this div would change according to the slider with some javascript! If that explanation is hard to understand have a look at my code. Your solution is elegant and has fewer moving parts :). There is just a minor flaw in your logic! the white gradient should start at the same percentage as the green part of the gradient. for example if the green gradient stops at 25% have the grey gradient start at 25%! To prevent the color fading you can some extra stops to your gradient of the same color. background: linear-gradient(90deg, green 0%, green 25%, white 25%, white 100%); I hope that helps!
Marked as helpful1@iulian-cenusaPosted over 3 years ago@Tyson-Wellings Thank you for the suggestion for the linear gradient ! Happy coding !
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