The onspin event activates when the up or down arrow is clicked on a spinner element.  The onspin event receives 3 special variables:

If the onspin expression evaluates to a number or a string, that value will be used to populate the spinner element instead of utilizing the default spinner logic for incrementing or decrementing the spinner value.


The following will refresh the screen when the spinner arrows are used.


The following example doubles the increment:

onspin: Number(value) + increment * 2;

The following is an example of a custom time spinner:

onspin: timeOnSpin(value, increment);

// This function increments or decrements the minutes portion of a time
function timeOnSpin(timeValue, increment) {
  // Assume time format of hh:mm
  var hours = timeValue.split(":")[0];
  var minutes = Number(timeValue.split(":")[1]);
  if (isNaN(minutes)) {
    // Invalid time format, don't change value in the box
    return timeValue;
  else {
    minutes += increment;
    if (minutes > 59) minutes = 0;
    if (minutes < 0) minutes = 59;
    minutes = String(minutes);
    if (minutes.length == 1) minutes = "0" + minutes;
    return hours + ":" + minutes;