Style input range background before thumb

Question

I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:

Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:

input[type='range'] {
    min-width: 100px;
    max-width: 200px;
    &::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background-color: @white;
        border: 1px solid @gray-4;
        height: 14px;
        width: 14px;
        &:hover,
        &:focus,
        &:active {
            border-color: @blue;
            background-color: @gray-2;
        }
    }
    &::-webkit-slider-runnable-track {
        background-color: @gray-2;
        border: 1px solid @gray-4;
    }
}

Answer 1

document.querySelectorAll(".__range").forEach(function(el) {       
  el.oninput =function(){            
  var valPercent = (el.valueAsNumber  - parseInt(el.min)) / 
                      (parseInt(el.max) - parseInt(el.min));
    var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
    el.style = style;
  };
  el.oninput();
});

.__range{
  margin:30px 0 20px 0;
  -webkit-appearance: none;
  background-color: #f5f6f8;
  height: 3px;
  width: 100%;
  margin: 10px auto;
}
.__range:focus{
  outline:none;
}
.__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #29907f;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}

<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">