Circular Slider using Jquery

Question

How to slide mouse in circular ? Draw an arc and a mouse pointer in a canvas. Mouse should be drag gable on the circular path?

//function to create mouse event to drag the mouse hover the arc

function mousedrag() {
    var canvasoffset = $(this.canvas).offset();
    var offsetX = canvasoffset.left;
    var offsetY = canvasoffset.top;     
    var mouseX = parseInt(e.offsetX || e.clientX - offsetX);
    var mouseY = parseInt(e.offsetY || e.clientY - offsetY);

    var radius = this.width / 2;
    var twoPI = 2 * Math.PI;
    var toRad =  twoPI / 360;
    var r_width =  this.width * 0.8;

    var radial_Angle = Math.atan2(mouseY - radius,mouseX - radius);

    var p_side_x =  radius + r_width * Math.cos(radial_Angle);        
    var p_side_y =  radius + r_width * Math.sin(radial_Angle);
    var p_mouse_x =  radius + ((r_width+10) * Math.sin(radial_Angle));
    var p_mouse_y =  radius + ((r_width+ 10) * Math.sin(radial_Angle));

    var imgData = this.ctx.getImageData(p_side_x, p_side_y, 1, 1).data;
    var selectedColor = new Color(imgData[0], imgData[1], imgData[2]);
            clearDraw();
    renderSpectrum();
    renderMouse(p_side_x, p_side_y, p_mouse_x, p_mouse_y);          
}

mouse handle does not slide properly.

Answer 1

Here is the jQuery roundSlider plugin for your requirement, check here http://roundsliderui.com/. This might helps you.

This roundslider having the similar options like the jQuery ui slider. It support default, min-range and range slider type. Not only the round slider it also supports various circle shapes such as quarter, half and pie circle shapes.

For more details check the demos and documentation page.

Please check the demo from jsFiddle.

Live demo:

$("#slider").roundSlider({
    width: 10,
    handleSize: "+8",
    value: "40"
});

$("#half-slider").roundSlider({
    width: 10,
    circleShape: "half-top",
    handleSize: "+8",
    value: "80"
});

.rs-control {
    display: inline-block;
    float: left;
    margin-left: 30px;
}
.rs-control .rs-path-color {
    background-color: #e9e9e9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" rel="stylesheet"/>

<div id="slider" class="rslider"></div>

<div id="half-slider" class="rslider"></div>

Screenshots with different appearances:

Check more details about different theme from here.

Answer 2

You can't actually force the mouse to be constrained into a circle.

But you can calculate the mouse position relative to a centerpoint.

// define a centerpoint

var cx=150;  
var cy=150;
var angleVersusCenter=0;

// listen for mouse moves 

function handleMouseMove(e){

  // get the mouse position

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // set the current radian angle of the mouse
  // versus the centerpoint

  var angleVersusCenter = Math.atan2( mouseY-cy, mouseX-cx );
}

A Demo: http://jsfiddle.net/m1erickson/z6cQB/