HTML-Bereich Eingabespur Teile teilen

Question

Ich habe eine einfache HTML-Bereich Eingangskomponente und ich möchte die Spur in drei verschiedene Teile teilen. Ich habe einen Bereich von 0 bis 75 in der Komponente. Ich würde gerne 0 bis 25 als grün, 26 bis 50 als gelb und 51 bis 75 als rot unabhängig vom Eingabewert stylen, dh die Farben sind konstant. Ist es möglich? Hier ist die Arbeits 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

Mit einem linear-gradient Hintergrund

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