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 roundSlider отсюда http://roundsliderui.com/. Это именно то, что вам нужно.

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

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

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

Связанные ответы: https://stackoverflow.com/a/31367164/1845801 и https://stackoverflow.com/a/31369265/1845801

Скриншоты:

Answer 4

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

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