jquery - 圆形 Jquery UI 滑块

Question

我正在寻找类似于jqueryui slide的东西。

但就我而言，主要问题是滑块的圆形设计。我见过旋钮控制，但它没有范围和控制按钮。

如果您知道这样的示例，请给我一个链接。谢谢。

Answer 1

Check the jQuery roundSlider plugin from here http://roundsliderui.com/. This is what you want exactly.

This roundslider having the similar options like the jQuery ui slider. It support default, min-range and range slider type. Not only the round slider it also supports various circle shapes such as quarter, half and pie circle shapes.

For more details check the demos and documentation page.

Please check the demo from jsFiddle.

Live demo:

$("#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>

Screenshots with different theming:

Check more details about different theme from here.

Answer 2

在interface.eyecon.ro上查看这个示例，它有一个圆圈和一个可拖动的手柄，从页面源来看，它并不太复杂。