Circular Slider Using Jquery

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 ho

Solution 1:

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 centerpointvar cx=150;  
var cy=150;
var angleVersusCenter=0;

// listen for mouse moves functionhandleMouseMove(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 centerpointvar angleVersusCenter = Math.atan2( mouseY-cy, mouseX-cx );
}

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

Solution 2:

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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script><linkhref="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" /><divid="slider"class="rslider"></div><divid="half-slider"class="rslider"></div>

Screenshots with different appearances:

Check more details about different theme from here.