Circular slider

by rastrano

HTML

<div id="test"></div>

<div id='container'> <div id='slider'> </div> </div>

CSS

#container { position:absolute; top:50px; left:50px; width:400px; height:400px; background:#ddd; border:1px solid #999;
border-radius:1000px;
}
#slider { position:relative; height:40px; width:40px; left:180px; top:-20px;
background: red url(http://img707.imageshack.us/img707/6060/arrh.png) no-repeat center 20px;
    border-radius:20px;
}

JavaScript

(function () {
        var $container = $('#container');
        var $slider = $('#slider');
        var sliderW2 = $slider.width()/2;
        var sliderH2 = $slider.height()/2;    
        var radius = 200;
        var deg = 0;    
        var elP = $('#container').offset();
        var elPos = { x: elP.left, y: elP.top};
        var X = 0, Y = 0;
        var mdown = false;
        $('#container')
        .mousedown(function (e) { mdown = true; })
        .mouseup(function (e) { mdown = false; })
        .mousemove(function (e) {
            if (mdown) {
               var mPos = {x: e.clientX-elPos.x, y: e.clientY-elPos.y};
               var atan = Math.atan2(mPos.x-radius, mPos.y-radius);
               deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 
                
               X = Math.round(radius* Math.sin(deg*Math.PI/180));    
               Y = Math.round(radius*  -Math.cos(deg*Math.PI/180));
               $slider.css({ left: X+radius-sliderW2, top: Y+radius-sliderH2 });              
               // AND FINALLY apply exact degrees to ball rotation
               $slider.css({ WebkitTransform: 'rotate(' + deg + 'deg)'});
               $slider.css({ '-moz-transform': 'rotate(' + deg + 'deg)'});
               //
               // PRINT DEGREES               
               $('#test').html('angle deg= '+deg); 
            }
        });
})();