将HTML范围输入轨道划分为零件

Question

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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">