XY-field by henrikh

The following code is all of the Javascript that is needed to create the example on the left:

var myFirstField = new Field('fieldID', 'knobID');
myFirstField.addEvent('change', function(steps){
   $('logger').set('text', 'x: ' + steps.x + ' y: ' + steps.y);
});
      

You can also use other kinds of ranges and steps:

var myFirstField = new Field('fieldID', 'knobID', {
  x: [-100, 10, 100],
  y: [20, 1, 0]
});
myFirstField.addEvent('change', function(steps){
   $('logger').set('text', 'x: ' + steps.x + ' y: ' + steps.y);
});
      

Styling is done using only CSS:

#styledField {
  width: 150px;
  height: 100px;
  background-color: #FC3;
}

#styledKnob {
  width: 20px;
  height: 20px;
  background-image: url("http://imgkk.com/i/k4O.png");
  margin: -10px; /* If the margin is negative the knob can "overflow" */
}