Design comparison
Solution retrospective
I couldn't find webkit property to make the past part of the slider change color, so it is working only for firefox. Does anyone know how to style this for webkit based browser ?
It make me so mad i did not even complete the mobile style :D
Community feedback
- @GregLyonsPosted over 2 years ago
Ahh I gave up on this challenge because I got so frustrated trying to style the slider. I couldn't figure out how to get the left part filled in, while having the right-hand part be not filled in (with only HTML/CSS).
Seeing this I remember that I actually had built a slider in a React project I worked on (so not pure HTML/CSS). I was following this tutorial for a double slider, and adapted it to make a single slider. Adapting that post to a single slider and in HTML/CSS/JS context, essentially, you have an HTML set-up like this:
<div class="slider__wrapper"> <input type="range" class="slider__thumb"> <div class="slider"> <div class="slider__track" /> <div class="slider__range" id="range" /> </div> </div>
Then you would use CSS to
- Remove the background from the
<input>
, so that only the thumb is visible (hence the class nameslider__thumb
); - Use
slider__track
as your basic background (the gray, empty one), andslider__range
as your filled-in background (the green one); - Use
position: relative;
onslider__wrapper
so that you canposition: absolute;
slider__thumb
andslider
to center them properly.
Finally, you would use JS to manipulate the width of
slider__range
based on the value of the input. So if the input value is 1 and the max is 5, thenslider__range
should havewidth: 20%;
. This makes it so that changing the value of the input changes the width of the backgroundslider__range
, which should achieve the desired effect. (Also, you may need to set somez-index
s to get it to look right.)It's pretty complicated, all to just to get the background of the slider to be two colors instead of one... I hope that all makes sense. I'd love to see a simpler/pure CSS solution though, as this challenge is marked as HTML/CSS only.
Marked as helpful0@MarcusTuliusCiceronPosted over 2 years ago@GregLyons Yeah if I had to make this for a professional project I would probably go for something like a library or a react build component but this is really frustrating to see that this achievable on mozilla and not on webkit based browser.
Thanks for the tips to built it anyway, I would probably have gone for something using mouse event but this seems much easier that way.
1 - Remove the background from the
Please log in to post a comment
Log in with GitHubJoin 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