将HTML范围输入轨道划分为多个部分

Question

我有一个简单的HTML范围输入组件,我想将轨道分为三个不同的部分.我的组件范围为0到75.我想将0到25的样式设置为绿色,将26到50设置为黄色,将51到75设置为红色,而不管输入值如何,即颜色是恒定的.有可能吗？这是工作的jsfiddle

var p = document.getElementById("price"),
    res = document.getElementById("result");

p.addEventListener("input", function() {
    res.innerHTML =  p.value;
}, false); 

<div style="margin-top: 1em">
    <h2>Price</h2>
    0<input id="price" type="range" min="0" max="75" value="" />75
</div>

<p id="result"></p>

Answer 1

有linear-gradient背景

body {
text-align:center;
}  

#range::-webkit-slider-runnable-track {
  width: 300px;
  height: 10px;
  background: linear-gradient(to right, green, green 25%, yellow 25%, yellow 50%, red 51%);
  border: none;
  border-radius: 3px;
}

#range::-moz-range-track {
  width: 300px;
  height: 10px;
  background: linear-gradient(to right, green, green 25%, yellow 25%, yellow 50%, red 51%);
  border: none;
  border-radius: 3px;
}

<input id="range" type="range">