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でこの例を確認してください。円とドラッグ可能なハンドルがあり、ページ ソースを見るとそれほど複雑ではありません。