Skip to content

Instantly share code, notes, and snippets.

@djiamnot

djiamnot/index.html

Created October 15, 2014 15:29
Show Gist options
  • Save djiamnot/a2aa2b02541c6bf468e7 to your computer and use it in GitHub Desktop.
Save djiamnot/a2aa2b02541c6bf468e7 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Slider Test // source http://jsbin.com/huqife/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/aterrien/jQuery-Kontrol/master/js/jquery.kontrol.js"></script>
<meta charset="utf-8">
<title>jQuery Slider Test</title>
</head>
<body>
<div id="slider"></div>
<div style="margin:10px">XY</div>
<fieldset id="pad" data-width="180" data-height="180">
<legend>XY Pad</legend>
x : <input name="x" value=27>
y : <input name="y" value=80>
</fieldset>
</div>
<input id="dial" value="30">
<script id="jsbin-javascript">
$("#slider").slider({
orientation: "vertical",
min: 0,
max: 1,
step: 0.001,
slide: function(event, ui){
console.log(ui.value);
}
});
$("#pad").xy({
displayPrevious:true,
min : 0,
max : 1000,
fgColor: "#555555",
bgCOlor: "#ffffff"
});
$("#dial").dial({
displayPrevious: true
});
</script>
</body>
</html>
Raw
jsbin.huqife.js
$("#slider").slider({
orientation: "vertical",
min: 0,
max: 1,
step: 0.001,
slide: function(event, ui){
console.log(ui.value);
}
});
$("#pad").xy({
displayPrevious:true,
min : 0,
max : 1000,
fgColor: "#555555",
bgCOlor: "#ffffff"
});
$("#dial").dial({
displayPrevious: true
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment