Design comparison
Solution retrospective
- Struggled a little with the range/checkbox inputs making them cross-browser compatible
- The slider fill bar was tricky, I ended up using linear-gradient with variables for it
If there's anything weird about my solution please let me know :>
Community feedback
- @jacksonwhitingPosted about 1 year ago
Nice work. I liked how you used a background gradient to color the slider. I tried that at first but abandoned it because I couldn't figure out how to resize the thumb without making the track a bigger size. Looks like making it position:relative did the trick for you unless I missed something else?
I think that's a simpler way to solve it than what I did (which was to use a box shadow and clip-path).
1@Jorge-sanchez09Posted about 1 year agoHi @jacksonwhiting. Actually I don't need to use position properties but I forgot to remove it hehe. For the sizes I'm specifying a short height for the input and a taller one for the thumb, and it doesn't interfere with each other.
Hope it helps a little
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