Javascript 自定义html输入范围（条滑块）

我想定制一个

<input type="range"...> </input>

我用的是有角的材料。 我需要有一个中间的区域是绿色的，两个区域的最小值和最大值是红色的。中间区域的大小由我拥有的两个值定义

你知道怎么做吗？

---

我不想使用D3，因为对于这么小的任务来说，这似乎非常复杂。

也许您可以从这个多量程滑块的示例开始，谢谢您的回答。我不是一个多范围滑块虽然寻找。我只需要将一个滑块移动到一个有3个颜色区域的条中。