范围滑块添加颜色填充

Question

var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="range-slider">
  <input class="range-slider__range" type="range" value="100" min="0" max="500">
  <span class="range-slider__value">0</span>
</div>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="100" min="0" max="500">
  <span class="range-slider__value">0</span>
</div>

大家好，我正在尝试向滑块添加范围颜色填充，当我们移动滑块时，尾部必须填充有附有图像的颜色参考。也可以在范围值中手动输入值。