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