jQuery Kontrol Test

by firegroove

HTML

<script src="https://www.cyberselfie.fr/wp2/wp-content/uploads/2018/03/jquery.kontrol.js"></script>
<script src="&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div style="float:left;width:200px;padding:30px">
  <fieldset class="pad" data-width="100" data-height="100">
    X : <input name="x" value=0> 
		y : <input name="y" value=0>
  </fieldset>
</div>

JavaScript

$(function() {
  var $pad = $(".pad")
    .xy({
      displayPrevious: true,
      min: -50,
      max: 50,
      fgColor: "red",
      bgColor: "green",
      cursor: 20,
      'change': function(value) {
/*         alert(this.v.x);
         */      }
    })
    .css({
      'border': '2px solid #288edf'
    });
});

$('input')
    .val(10)
    .trigger('change');