jQuery的：創建一個圓形滑塊

Question

你可能已經見過的JavaScript滑塊：

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

什麼我構想是一個圓形滑塊。它將由一個可拖動的按鈕組成，並且該按鈕可以在環上的任何位置拖動。該值取決於按鈕位於的位置（想象一下時鐘）。

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

這個插件怎麼樣http://controlwheel.com/。它很容易使用，並有一些例子

Answer 4

我寫了一個支持全/半圓滑塊的jQuery plugin。

Demo Page & Documentation

Answer 5

檢查從這裏http://roundsliderui.com/了jQuery插件roundSlider。這正是你想要的。

這個roundslider有類似jQuery ui滑塊的選項。它支持默認，最小範圍和範圍滑塊類型。它不僅支持圓滑塊，還支持各種circle shapes，如季度,一半和餅圓形。

有關更多詳細信息，請檢查demos和documentation頁面。

請檢查演示從jsFiddle。

相關答案：https://stackoverflow.com/a/31367164/1845801和https://stackoverflow.com/a/31369265/1845801

截圖：