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

我有一个简单的HTML范围输入组件，我想把曲目分成三个不同的部分。我在组件中的范围是0到75。我想样式0至25为绿色，26至50为黄色，51至75为红色，与输入值无关，即颜色不变。有可能吗？这是工作票

var p=document.getElementById（“价格”），
res=document.getElementById（“结果”）；
p、 addEventListener（“输入”，函数（）{
res.innerHTML=p.value；
}，假）

价格
075
具有
线性渐变背景


正文{
文本对齐：居中；
}  
#范围：：-webkit滑块可运行轨迹{
宽度：300px；
高度：10px；
背景：线性梯度（向右，绿色，绿色25%，黄色25%，黄色50%，红色51%）；
边界：无；
边界半径：3px；
}
#范围：：-moz范围轨迹{
宽度：300px；
高度：10px；
背景：线性梯度（向右，绿色，绿色25%，黄色25%，黄色50%，红色51%）；
边界：无；
边界半径：3px；
}
看看这个：或者这对于你的任务来说太复杂了？@Nebulosar我已经看过这个例子了，但它并不完全是我想要的。我不想让颜色重叠是的，但是你可以用梯度来做。梯度是一种方法，我想，一些修补可能会让你达到目的。如果你总是有这三个位置，那么在FF55中它只有33%，33%，33%，梯度相当宽，可拖动部分仅从黄色变为一半红色：）似乎是一个
边距
问题…已修复。仍然不适用于我，抱歉。是的，原则很重要，但给出一个不完整的解决方案并不是真正的StackOverflow风格：）线性渐变（向右，绿色33%，黄色34%，黄色66%，红色67%）可以解决这个问题，我正在等待我的编辑得到同行的评论，在你的代码片段中添加一点，将宽度：300px更改为100%似乎可以解决这个问题：）