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

Я написал плагин jQuery который поддерживает ползунки полного/полукруглого сечения.

Демо-страница & Документация

Answer 4

Проверьте плагин jQuery roundSlider здесь. http://roundsliderui.com/.Это именно то, что вы хотите.

Этот круглый слайдер имеет те же параметры, что и слайдер пользовательского интерфейса jQuery.Он поддерживает тип ползунка по умолчанию, минимальный диапазон и диапазон.Не только круглый слайдер, он также поддерживает различные формы круга такой как четверть, половина и пирог формы круга.

Для более подробной информации проверьте демо и документация страница.

Пожалуйста, проверьте демо-версию с jsFiddle.

Похожие ответы: https://stackoverflow.com/a/31367164/1845801 и https://stackoverflow.com/a/31369265/1845801

Скриншоты: