I would like to do a rounded slider like the image below. Is jQuery able to do this?
I know how a straight slider works but I would like to make a HTML5 rounded slider. Here is what I found online http://jsfiddle.net/XdvNg/1/ - but I dont know how to get the slider value one the user lets go
Here is what I came up with:
$(function () {
var $circle = $('#circle'),
$handler = $('#handler'),
$p = $('#test'),
handlerW2 = $handler.width()/2,
rad = $circle.width()/2,
offs = $circle.offset(),
elPos = {x:offs.left, y:offs.top},
mHold = 0,
PI2 = Math.PI/180;
$handler.mousedown(function() { mHold = 1; });
$(document).mousemove(function(e) {
if (mHold) {
var mPos = {x:e.pageX-elPos.x, y:e.pageY-elPos.y},
atan = Math.atan2(mPos.x-rad, mPos.y-rad),
deg = -atan/PI2+180,
perc = (deg*100/360)|0,
X = Math.round(rad* Math.sin(deg*PI2)),
Y = Math.round(rad* -Math.cos(deg*PI2));
$handler.css({left:X+rad-handlerW2, top:Y+rad-handlerW2, transform:'rotate('+deg+'deg)'});
}
}).mouseup(function() { mHold = 0; });
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With