Split HTML Range Input

Question

I have a simple HTML range input component and I would like to split the track into three different parts. I have a range from 0 to 75 in the component. I would like the style from 0 to 25 to be green, from 26 to 50 to yellow, and from 51 to 75 to red, regardless of the input value, i.e. Colors are constant. Is it possible? Here is a working 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>

Run code

Answer 1

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

Run code