Design comparison
SolutionDesign
Community feedback
- @j-hogbenPosted about 2 months ago
Hi Jose,
You're solution looks good, functionality seems to be working really nicely, nice work!
I do have a suggestion for the styling:
- I notice from your js that the whole of the range slider colour changes to green if the value is > 0. It might be worth looking at this, adding an event listener and a background linear gradient to the slider so the background colour changes depending on the slider value/progress.
Something like this:
const sliderProgress = '#a4ffaf'; const sliderEmpty = '#08070b'; // WHEN SLIDER VALUE CHANGES, UPDATE TRACK COLOUR slider_range.addEventListener('input', (event) => { const sliderPosition = event.target.value; const progress = (sliderPosition / slider_range.max) * 100; slider_range.style.background = `linear-gradient(to right, ${sliderProgress}, ${sliderProgress} ${progress}%, ${sliderEmpty} ${progress}%)`; });
...should change the background colour of the slider at each 'input' to follow your slider thumb. Hope this is helpful in some way!
Looking good mate, keep it up!
0
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