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
