Sliding component using JS Sass and html

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

1. Remove the background from the <input>, so that only the thumb is visible (hence the class name slider__thumb);
2. Use slider__track as your basic background (the gray, empty one), and slider__range as your filled-in background (the green one);
3. Use position: relative; on slider__wrapper so that you can position: absolute; slider__thumb and slider 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, then slider__range should have width: 20%;. This makes it so that changing the value of the input changes the width of the background slider__range, which should achieve the desired effect. (Also, you may need to set some z-indexs 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.