jQuery:を円形スライダー

Question

たものを見たのですが、JavaScriptのスライダー前:

http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html

私の感想である円形のライダーです。これらのdraggableボタン一つの円するというボタンでドラッグできるので、リングがあります。の値に依存してどのようなポジションのボタンはたいとのクロック).

Answer 1

中心点Cを画成 mにおける現在のマウスポイント

あなたのマウスドラッグイベントハンドラでは、あなたが持っていると思います。

var dx = m.x-c.x;
var dy = m.y-c.y;

var scale = radius/Math.sqrt(dx*dx+dy*dy);

slider.x = dx*scale + c.x;
slider.y = dy*scale + c.y;

半径は、スライダーの一部の設定値であろう

Answer 2

これはどう：ます。http： //www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-uiする

いくつかの説明やデモます。

Answer 3

私は半分/フルサークルのスライダーをサポートしています jQueryのプラグインを書かれています。

デモページの＆<のhref = "https://github.com/ princejwesley /円形スライダー/ブロブ/マスター/ README.md」のrel = "nofollowを">ドキュメントの

Answer 4

チェックのjQuery roundSliderプラグインはこちらから http://roundsliderui.com/.こうたいしょう。

このroundsliderと同様のオプションのように、jQuery uiライダーです。Itサポートデフォルト値、min-範囲の範囲のスライダータイプです。なみのスライダーにも対応し様々な 円形 など 四半期, 半 や パイ 円ます。

詳細はチェックを デモ や 文書 ページです。

をご確認くださいデモから jsFiddle.

関連する回答: https://stackoverflow.com/a/31367164/1845801 や https://stackoverflow.com/a/31369265/1845801

画面: