JQuery: creating a circular slider

Question

You may have already seen JavaScript sliders:

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

What I represent is a circular slider. It will consist of a draggable button at one point in the circle - and this button can be dragged anywhere along the ring. The value depends on what position the button is in (think about the clock).

Answer 1

define center point c current mouse point in m

in the mouse drag event handler, you will have

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;

Radius

will be some slider preset value,

Answer 2

: http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui

.

Answer 3

http://controlwheel.com/.

Answer 4

jQuery, / .

-

Answer 5

jQuery roundSlider http://roundsliderui.com/. , .

, jQuery ui. , . , pie.

. demos .

, jsFiddle.

: fooobar.com/questions/1024717/... fooobar.com/questions/1024718/... p >

: