jQuery：创建一个圆形滑块

Question

You may have seen JavaScript sliders before:

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

What I'm envisioning is a circular slider. It would consist of a draggable button at one point on the circle -- and that button can be dragged anywhere along the ring. The value depends on what position the button is at (think of a clock).

Answer 1

define a center point c current mouse point at m

in your mouse drag event handler, you'd 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 would be some preset value of the slider,

Answer 2

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

Some explanations and a demo.

Answer 3

I have written a jQuery plugin which supports full/half circle sliders.

Demo Page & Documentation

Answer 4

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 .

Related answers: https://stackoverflow.com/a/31367164/1845801 and https://stackoverflow.com/a/31369265/1845801

Screenshots: