Up/Down selector in jQuery

    $(selector).updown(minimum, maximum, initial, [valueChangedCallback]);
            

minimum and maximum represent the bounds of the range of number which may be selected through the up/down controls. Both values are inclusive, and the value will flip around if it reaches these boundaries.

initial represents the initial value of the control.

The optional valueChangedCallback parameter accepts a function which will be called whenever the value of the field changes through the up/down control. This function should accept a single argument, the jquery object wrapping the target element, and should set the display value for the target element. If no function is provided, the default setter for input fields is used. This function can be used to perform additional transformations before display, for example, mapping the number onto a text item.

The actual value of the element will be stored in target.data("value"). This value shall be independent of the displayed value.

<input> Element

Here we're attaching the up-down controls to the input element as follows:

$("input.target").updown(0, 9, 1);

We don't need to specify a callback, since the default handles input elements.

<div> element

In the case of a div element (and any other non-input element) the controls are attached as follows:

$("div.target").updown(0, 9, 1, htmlValueSetter);

Where htmlValueSetter is a function:

function htmlValueSetter(target) {
	target.html(target.data("value"));
}