Circular Slider 2
HTML
<div id="rotationSliderContainer">
<div id="rotationSlider"></div>
</div>
CSS
#rotationSliderContainer {
position: relative;
width: 300px;
height: 300px;
background: #8B8E8F;
border-radius: 250px;
border: 20px solid #CCC;
cursor: default;
/*box-sizing: border-box;*/
outline: 0;
left: 50px;
top: 50px;
}
#rotationSliderContainer #rotationSlider {
position: absolute;
left: 30px;
top: 50px;
height: 40px;
width: 40px;
background: #A64B00;
border-radius: 50%;
cursor: pointer;
/*box-sizing: border-box;*/
z-index: 3;
}
JavaScript
$(function(){
var $container = $('#rotationSliderContainer');
var $slider = $container.find('#rotationSlider');document.getElementById('appBusyIndicator');
var sliderWidth = $slider.width()/2;
var sliderHeight = $slider.height()/2;
var radius = ($container.width()/2);
var deg = 0;
var mPos = {};
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-sliderWidth, top: Y+radius-sliderHeight });
var mdown = false;
$container.on('touchstart',function (e) { mdown = true; e.originalEvent.preventDefault(); });
$container.on('touchend',function (e) { mdown = false; });
$container.on('touchmove',function (e) {
if(mdown)
{
console.log("event ",e);
// firefox compatibility
if(typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") {
var targetOffset = $(e.target).offset();
e.offsetX = e.pageX - targetOffset.left;
e.offsetY = e.pageY - targetOffset.top;
}
if($(e.target).is('#rotationSliderContainer'))
{
mPos = {x: e.offsetX, y: e.offsetY};
//console.log("print mPos 1",mPos);
}
else
{
mPos = {x: e.target.offsetLeft + e.offsetX, y: e.target.offsetTop + e.offsetY};
//console.log("print mPos 2",mPos);
}
var atan = Math.atan2(mPos.x-radius, mPos.y-radius);
deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position
// for attraction to multiple of 90 degrees
var distance = Math.abs( deg - ( Math.round(deg / 90) * 90 ) );
if( distance <= 5 )
deg = Math.round(deg / 90) * 90;
...