Проверьте плагин jQuery roundSlider здесь http://roundsliderui.com/ . Это то, что вы хотите точно.
Этот раунд имеет аналогичные параметры, такие как слайдер jQuery ui. Он поддерживает стандартные, минимальные и диапазонные диапазоны. Не только круглый слайдер также поддерживает различные круглые фигуры , такие как четверть, половина и круговыми кругами.
Подробнее см. демо и документация .
Пожалуйста, проверьте демонстрацию jsFiddle .
Живая демонстрация:
<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
$("#slider").roundSlider({
sliderType: "range",
value: "20,80"
});
#slider{
margin: 10px auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" rel="stylesheet"/>
<div id="slider"></div>
</div>
</div>
Скриншоты с различной тематикой:
Подробнее о другой теме см. здесь .