example of circular slider

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<style type="text/css">
    #container { position:absolute; top:200px; left:200px; width:400px; height:400px; background:#ddd; border:1px solid #999; }
    #slider { position:relative; height:40px; width:40px; background:red; left:180px; top:-20px; }
</style>

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript">
    (function () {
        var radius = 200;
        var mdown = false;
        var parentOffset = $('#container').offset();
        $('#container')
        .mousedown(function (e) { mdown = true; })
        .mouseup(function (e) { mdown = false; })
        .mousemove(function (e) {
            if (mdown) {
                var center = { x: parentOffset.left + 200, y: parentOffset.top + 200 };
                var mouse = { x : e.clientX, y : e.clientY };
                var dx = mouse.x - center.x;
                var dy = mouse.y - center.y;
                var scale = radius / Math.sqrt(dx * dx + dy * dy);
                var slider = { x : dx * scale + center.x, y : dy * scale + center.y
                };
                $('#slider').css({
                    left: -20 - parentOffset.left + slider.x + "px",
                    top: -20 - parentOffset.top + slider.y + "px"
                });
            }
        });
    })();
</script>
</body>
</html>