Options
culture
Sets the culture to use for parsing and formatting the value. If null
, the currently set culture in Globalize
is used, see Globalize docs for available cultures. Only relevant if the numberFormat
option is set. Requires Globalize to be included.
$( ".selector" ).spinner(
{ culture: "fr" }
);
disabled
This option if set to true disables spinner. By default its value is false.
$( ".selector" ).spinner(
{ disabled: true }
);
icons
This option sets icons to use for buttons, matching an icon provided by the jQuery UI CSS Framework. By default its value is { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }.
$( ".selector" ).spinner(
{ icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
incremental
This option controls the number of steps taken when holding down a spin button. By default its value is true.
This can be of type:
- Boolean − If set to false all steps are equal. If set to true, the stepping delta will increase when spun incessantly.
- Function − This must return the number of steps that should occur for the current spin.
$( ".selector" ).spinner(
{ incremental: false }
);
max
This option indicates the maximum allowed value. By default its value is null which means there is no maximum enforced.
This can be of type
- Number − The maximum value.
- String − If Globalize is included, the max option can be passed as a string which will be parsed based on the numberFormat and culture options
$( ".selector" ).spinner(
{ max: 50 }
);
min
This option indicates the minimum allowed value. By default its value is null which means there is no minimum enforced.
This can be of type
- Number − The minimum value.
- String − If Globalize is included, the min option can be passed as a string which will be parsed based on the numberFormat and culture options.
$( ".selector" ).spinner(
{ min: 0 }
);
numberFormat
This option indicates format of numbers passed to Globalize, if available. Most common are “n” for a decimal number and “C” for a currency value. By default its value is null.
$( ".selector" ).spinner(
{ numberFormat: "n" }
);
page
This option indicates the number of steps to take when paging via the pageUp/pageDown methods. By default its value is 10.
$( ".selector" ).spinner(
{ page: 2 }
);
step
This option indicates size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element’s step attribute is used if it exists and the option is not explicitly set.
This can be of type
- Number − The size of step.
- String − If Globalize is included, the step option can be passed as a string which will be parsed based on the numberFormat and culture options, otherwise it will fall back to the native parseFloat.
$( ".selector" ).spinner(
{ step: 2 }
);
Methods
destroy
Removes the spinner functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
$( ".selector" ).spinner("destroy");
disable
This action disables spinner. This method does not accept any arguments.
$( ".selector" ).spinner("disable");
enable
This action activates the spinner. This signature does not accept any arguments.
$( ".selector" ).spinner("enable");
instance()
Retrieves the spinner’s instance object. If the element does not have an associated instance, undefined
is returned. Unlike other widget methods, instance()
is safe to call on any element after the spinner plugin has loaded.
$( ".selector" ).spinner("instance");
isValid()
Returns whether the Spinner’s value is valid given its min
, max
, and step
. This method does not accept any arguments.
var isValid = $( ".selector" ).spinner( "isValid" );
option( optionName )
This action gets the value currently associated with the specified optionName.
var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
option
This action gets an object containing key/value pairs representing the current spinner options hash. This method does not accept any arguments.
$( ".selector" ).spinner("option");
option( optionName, value )
This action sets the value of the spinner option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
$( ".selector" ).spinner( "option", "disabled", true );
option( options )
This action sets one or more options to the spinner.
$( ".selector" ).spinner( "option", { disabled: true } );
pageDown( [pages ] )
This action decrements the value by the specified number of pages, as defined by the page option. Invoking pageDown() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("pageDown");
pageUp( [pages ] )
This action increments the value by the specified number of pages, as defined by the page option. Invoking pageUp() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("pageUp");
stepDown( [steps ] )
This action decrements the value by the specified number of steps. Invoking stepDown() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("stepDown");
stepUp( [steps ] )
This action increments the value by the specified number of steps. Invoking stepUp() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("stepUp");
value
This action gets the current value as a number. The value is parsed based on the numberFormat and culture options. This method does not accept any arguments.
var value = $( ".selector" ).spinner( "value" );
value( value )
This action sets the value. if value is passed value is parsed based on the numberFormat and culture options.
$( ".selector" ).spinner( "value", 50 );
widget()
Returns a jQuery
object containing the generated wrapper.
$( ".selector" ).spinner( "widget");
Events
change(event, ui)
This event is triggered when the value of the spinner has changed and the input is no longer focused. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
change: function( event, ui ) {}
});
create(event, ui)
This event is triggered when the spinner is created. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
create: function( event, ui ) {}
});
spin(event, ui)
This event is triggered during increment/decrement. Where event is of type Event, and ui is of type Object.and represents the new value to be set, unless the event is cancelled.
$( ".selector" ).spinner({
spin: function( event, ui ) {}
});
start(event, ui)
This event is triggered before a spin. Can be canceled, preventing the spin from occurring. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
start: function( event, ui ) {}
});
stop(event, ui)
This event is triggered after a spin. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
stop: function( event, ui )