制作自定义范围滑块

Question

我正在尝试为图像中显示的温度变化制作一个自定义范围滑块（带红色手柄的弯曲滑块）：

我尝试使用jQuery Range Slider和我找到的小提琴，LINK : http://jsfiddle.net/soundar24/LpuLe9tr/3/

但是我无法将滑块划分为多个部分（如图所示），每个部分代表一个温度值。

有人可以帮我完成这个吗？ 任何建议都会有所帮助。感谢

Answer 1

将以下内容添加到代码中。您可以根据零件号的要求更改边框值：

#arc-slider .rs-border.rs-outer {
 border: 3px dotted #51c5cf;
}

#arc-slider .rs-border.rs-inner {
  border-width: 0px;
}