Page tree
Skip to end of metadata
Go to start of metadata

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

  • value - The value within the box before the spin operation was initiated, represented as a string
  • newValue - The new calculated value after the spin operation has completed, represented as a number
  • increment - Positive or negative number depending on whether the user has clicked the up or the down arrow; the default values for increment are 1 and -1; however this can be modified by changing the "increment value" property on the widget
  • spinner - A reference to the spinner element

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;
  • No labels