360 Degree Angular Slider
1 post
Page 1 of 1
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: 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.
Here's an example of what I been looking for...
Screenshot: 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.
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023