要为范围滑动条添加样式，可以使用JavaScript和CSS来实现。以下是一个示例解决方法：

HTML代码：

CSS代码：

#slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  background: #4CAF50;
  border-radius: 5px;
  border: none;
}

#slider::-moz-range-track {
  width: 100%;
  height: 10px;
  background: #4CAF50;
  border-radius: 5px;
  border: none;
}

#slider::-ms-track {
  width: 100%;
  height: 10px;
  background: #4CAF50;
  border-radius: 5px;
  border: none;
}

#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}

#slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}

#slider::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}

JavaScript代码：

document.getElementById('slider').addEventListener('input', function() {
  var value = (this.value - this.min) / (this.max - this.min) * 100;
  this.style.background = 'linear-gradient(to right, #4CAF50 0%, #4CAF50 ' + value + '%, #ddd ' + value + '%, #ddd 100%)';
});

这个解决方法使用了CSS中的伪元素选择器来修改滑动条的样式，而不使用::-webkit-slider-thumb。JavaScript代码用于在滑动条的值改变时，动态修改滑动条的背景颜色，以显示当前值的百分比。