Es posible que haya visto antes deslizadores de JavaScript:jQuery: Crear un control deslizante circular
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html
Lo que estoy previsión de un control deslizante circular. Consistiría en un botón que se puede arrastrar en un punto del círculo, y ese botón se puede arrastrar a cualquier punto del anillo. El valor depende de en qué posición esté el botón (piense en un reloj).
definen un punto central c punto actual del ratón en m
en el controlador de eventos de arrastrar el ratón, que tendría
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;
radio sería cierto valor preestablecido de la corredera,
Qué tal esto: http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui
Algunas explicaciones y una demostración.
Qué tal este complemento http://controlwheel.com/. es fácil de usar y tiene algunos ejemplos
He escrito un jQuery plugin que admite controles deslizantes de círculo completo/medio.
Compruebe el plugin de jQuery roundSlider de aquí http://roundsliderui.com/. Esto es lo que quieres exactamente.
Este roundslider tiene opciones similares como el control deslizante jQuery ui. Es compatible con el tipo de control deslizante predeterminado, rango mínimo y rango. No solo el control deslizante redondo también admite varios circle shapes, como , trimestre, medio y pie formas circulares. Para obtener más información, consulte la página demos y documentation.
Compruebe la demostración desde jsFiddle.
respuestas relacionadas:https://stackoverflow.com/a/31367164/1845801 y https://stackoverflow.com/a/31369265/1845801
Imágenes:
¿cómo poner en práctica esta que estaba buscando lo mismo y encontrado este hilo, pero no tengo idea de cómo Implementaría ese código – mcgrailm
la misma pregunta matemática es bastante fácil, pero ¿cómo implementarías la interfaz? ¿cómo se estructura esto usando div's y tal? – ina
use css arriba, izquierda en el elemento: ejemplo en http://pastebin.com/kTAfEwTC – Jimmy