Bootstrap Range Ползунок ограничивает диапазон ручки

Question

Я заменил ручку слайдера начальной загрузки на фоновое изображение размером 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>

Answer 1

Если кому-то нужен ответ:

Я переключился на Powerange, поскольку стили IOS ручки не будут перекрывать дорожку.

Answer 2

Вы можете использовать стандартный ввод HTML5 с диапазоном типов. Тем не менее, вам нужно стиль для работы с различными браузерами (пока только IE работает из коробки).