Extend from $.fn.textbox.defaults. Override defaults with $.fn.spinner.defaults.

The spinner combines a editable text box and two small buttons that let the user choose from a range of values. Similar to the combobox, the spinner allows the user to type in a value but do not has a drop-down list. The spinner is the base component to create other spinner component such as numberspinner, timespinner, etc.


  • textbox

Usage Example

The spinner should be created using javascript. Creating from markup is not allowed.


The properties extend from textbox, below is the added properties for spinner.

Name Type Description Default
width number The width of this component. auto
height number The height of this component. Available since version 1.3.2. 22
value string The initialize value.
min string The minimum allowed value. null
max string The maximum allowed value. null
increment number The increment value when click spinner button. 1
editable boolean Defines if user can type value directly into the field. true
disabled boolean Defines if to disable the field. false
readonly boolean Defines if the component is read-only. Available since version 1.3.6. false
spinAlign string Defines the alignment of the spin buttons. Possible values: 'left','right','horizontal','vertical' Available since version 1.5. right
spin function(down) A function called when user click the spinner button. The 'down' parameter indicate if the user click the down button.


The events extend from textbox, below is the added events for spinner.

Name Parameters Description
onSpinUp none Fires when user click the up spinner button.
onSpinDown none Fires when user click the down spinner button.


The methods extend from textbox, below is the added methods for spinner.

Name Parameter Description
options none Return the options object.
destroy none Destroy the spinner component.
resize width Reset the component width. Override the original width by passing the 'width' parameter.

Code example:

$('#ss').spinner('resize');  // resize with original width
$('#ss').spinner('resize', 200);  // resize with new width
enable none Enable the component.
disable none Disable the component.
getValue none Get the component value.
readonly mode Enable/Disable readonly mode. Available since version 1.3.6.

Code example:

$('#ss').spinner('readonly');		// enable readonly mode
$('#ss').spinner('readonly', true);	// enable readonly mode
$('#ss').spinner('readonly', false);	// disable readonly mode
setValue value Set the component value.
clear none Clear the component value.
reset none Reset the component value. Available since version 1.3.2.