jQuery: Creating a circular slider

问题:

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).

回答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,

回答2:

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

Some explanations and a demo.

回答3:

How about this plugin http://controlwheel.com/ . it's easy to use and has some examples

回答4:

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

Demo Page & Documentation

回答5:

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:

回答6:

Add all the required libraries:

<link href="roundslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="roundslider.min.js"></script>

Divs to place the slider:

<div id="roundslider1" class="roundslider"></div>
<div id="roundslider2" class="roundslider"></div>
<div id="roundslider3" class="roundslider"></div>

Script code:

<script>
$("#roundslider1").roundSlider({
    sliderType: "default",
    value: 50
});

$("#roundslider2").roundSlider({
    sliderType: "min-range",
    value: 50
});

$("#roundslider3").roundSlider({
    sliderType: "range",
    value: "20,50"
});
</script>

For working complete demo: click here