• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

360 Degree Angular Slider

User avatar
mikethedj4
VIP - Site Partner
Posts: 2593

360 Degree Angular Slider

Sun Jan 19, 2014 4:20 am

So earlier today I spent about maybe an hour or two looking for a good jquery plugin that's a 360deg angular slider.

Here's an example of what I been looking for...
Screenshot:
1551688_10151925039298099_1852054708_n.jpg
I asked on a Facebook page full of local javascript web developers. Who suggested a few resources...

http://anthonyterrien.com/knob/
http://www.jqueryscript.net/demo/jQuery ... ider/demo/
http://layerstyles.org/

JQuery knob is what I'm looking forward to using, but one of the developers "accepted the challenge" and created the following. (I changed the visual look a bit to be more appealing but Corey Frang) did all the programming himself.

You can view the original here.

Enjoy!

Here's the full code.

Code: Select all

<!DOCTYPE html>
<html>
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/OWUkoRit/1/edit
-->
<head>
<title>360 Degree Angle Slider</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta name="description" content="[add your bin description]" />
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<style id="jsbin-css">
html, body { background: #ccc; }

.angler {
  display: inline-block;
}

.angleInput {
  padding:1em;
}
</style>
</head>
<body>
  <div class="angleInput">
    <svg class="angler" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
     <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
     <defs>
      <radialGradient spreadMethod="pad" id="svg_10">
       <stop offset="0.90887" stop-opacity="0.99609" stop-color="#e1e1e1"/>
       <stop offset="1" stop-opacity="0.99609" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_11">
       <stop offset="0.81122" stop-opacity="0.99609" stop-color="#e1e1e1"/>
       <stop offset="1" stop-opacity="0.99609" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_12">
       <stop offset="0.76434" stop-opacity="0.99609" stop-color="#e1e1e1"/>
       <stop offset="0.92059" stop-opacity="0.99609" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_13">
       <stop offset="0.81903" stop-opacity="0.99609" stop-color="#e1e1e1"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_14">
       <stop offset="0.81903" stop-opacity="0.99609" stop-color="#e1e1e1"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_16">
       <stop offset="0.00262" stop-opacity="0.99219" stop-color="#e1e1e1"/>
       <stop offset="1" stop-opacity="0.01172" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_18">
       <stop offset="0" stop-opacity="0.99219" stop-color="#adadad"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_19">
       <stop offset="0" stop-opacity="0.98828" stop-color="#777777"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_20">
       <stop offset="0" stop-opacity="0.98438" stop-color="#b2b2b2"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_21">
       <stop offset="0" stop-opacity="0.98047" stop-color="#cccccc"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_22">
       <stop offset="0.81122" stop-opacity="0.98047" stop-color="#cccccc"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_24">
       <stop offset="0.37372" stop-opacity="0.97656" stop-color="#b7b7b7"/>
       <stop offset="0.70966" stop-opacity="0.03516" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_25">
       <stop offset="0" stop-opacity="0.97656" stop-color="#b7b7b7"/>
       <stop offset="0.70966" stop-opacity="0.03516" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_26">
       <stop offset="0.77606" stop-opacity="0.98047" stop-color="#cccccc"/>
       <stop offset="0.93622" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_27">
       <stop offset="0.83856" stop-opacity="0.98047" stop-color="#cccccc"/>
       <stop offset="0.95184" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_28">
       <stop offset="0.86591" stop-opacity="0.98047" stop-color="#cccccc"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_29">
       <stop offset="0.81903" stop-opacity="0.98047" stop-color="#cccccc"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_30">
       <stop offset="0.81903" stop-opacity="0.97656" stop-color="#dbdbdb"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_31">
       <stop offset="0.81903" stop-opacity="0.97266" stop-color="#e5e5e5"/>
       <stop offset="1" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
      <radialGradient r="0.5" cy="0.5" cx="0.5" spreadMethod="pad" id="svg_32">
       <stop offset="0.81903" stop-opacity="0.97266" stop-color="#e5e5e5"/>
       <stop offset="0.91278" stop-opacity="0.99219" stop-color="#ffffff"/>
      </radialGradient>
     </defs>
     <g>
      <title>Layer 1</title>
      <circle id="svg_9" stroke-width="2" stroke="#727272" r="22.07772" cy="25" cx="25" fill="url(#svg_32)"/>
      <g id="svg_17">
       <rect stroke="#727272" id="svg_4" height="18.75" width="1.15" y="5.475" x="24.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#727272"/>
       <rect stroke="#727272" id="svg_8" height="2.8" width="3.1" y="23.5" x="23.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#727272"/>
      </g>
     </g>
    </svg>
    <input type="text" value="0">
  </div>
<script type="text/javascript">
$(".angleInput").each(function() {
  var container = $(this),
  body = $(document.body),
  angler = container.find(".angler"),
  input = container.find("input"),
  val = 0;

  angler.on("mousedown touchstart", mouseDown);
  body.on("mouseup touchstop", mouseUp);

  input.on("blur keyup change", function() {
    if (input.val() != val) {
      setAngle(input.val());
    }
  });
  
  function setAngle(value) {
    angler.css("transform", "rotate(" + value + "deg)");
    input.val(value);
  }
  
  function mouseDown(event) {
    body.on("mousemove.angleInput", handleMove);
    handleMove(event);
    event.preventDefault();
  }
  
  function mouseUp(event) {
    body.off("mousemove.angleInput", handleMove);
  }
  
  function handleMove(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    setAngle(0);
    var ofs = angler.offset();
    ofs.left += angler.height()/2;
    ofs.top += angler.width()/2;

    var x = mouseX - ofs.left;
    var y = mouseY - ofs.top;
    
    var angle = Math.atan2(x, y) * 180 / Math.PI;
    angle = 180 - angle;
    // strip decimal, go between 0-360
    angle = ((angle + 360) | 0) % 360;
    setAngle(angle);
  }

});
</script>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
Image

Post Reply

Return to “Tutorials”