Javascript 引导范围滑块限制手柄范围

我用大小为39px x 39px的背景图像替换了引导滑块的手柄

现在我想限制引导滑块手柄的范围，如第二页所示。 但是，我如何修复它，使手柄不会超出轨道的范围

<div style="width:80%; margin: 50px auto;">     
    <input id="ex1" data-slider-id='rangeslider' type="text" data-slider-min="0" data-slider-max="300" data-slider-step="1" data-slider-value="0"/>
</div>
<div style="width:80%; margin: 50px auto;">     
    <input type="range" step="1" value="0" max="10" min="0" name="Size" id="size">
</div>

您可以使用带有类型范围的标准html5输入。但是，您需要使用不同的浏览器（到目前为止，只有IE是现成的）。

如果有人需要答案：

---

我切换到了Powerange，因为手柄的IOS样式不会与音轨重叠。

不，我不能，因为我不能设置输入类型范围较低音轨的样式。这就是为什么我需要引导滑块。