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

Question

我希望自定义

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

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

你知道这样做的方法吗？ 我不想使用D3，因为这对于这么小的任务来说似乎非常复杂。