HTML input[range]组件自定义样式（css，js/jq）

首先 演示：

其次 代码部分

css

[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    transition: 0.3s;
    /*以下为自定义非必须*/
      background-size: 98% 3px;
      margin: auto;
      width: 100px;
      outline: none;
      height: 3px;
      margin: 8px;
}

[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
    border-radius: 5px;
    transition: 0.3s;
}

[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #3b82f6;
    transform:translateY(-30%);
    border: 1px solid transparent;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0 0 0 99vw;
}

js

var inputRanges = document.querySelectorAll('input[type="range"]');

inputRanges.forEach(function(inputRange) {
  var value = inputRange.value;
  inputRange.style.backgroundImage = 'linear-gradient(to right, #3b82f6 ' + value + '%, #FFF 0)';
});

inputRanges.forEach(function(inputRange) {
  inputRange.addEventListener('input', function() {
    var value = this.value;
    this.style.backgroundImage = 'linear-gradient(to right, #3b82f6 ' + value + '%, #FFF 0)';
  });
});

jq

$('input[type="range"]').each(function() {
  var value = $(this).val();
  $(this).css('background-image', 'linear-gradient(to right, #3b82f6 ' + value + '%, #FFF 0)');
});

$('input[type="range"]').on("input",function() {
  $(this).css('background-image', 'linear-gradient(to right, #3b82f6 ' + $(this).val() + '%, #FFF 0)');
});

js/jq主要用于拖动过后的区域颜色填充