jQuery UI Spinner

jQuery UI Spinner turns a text input into a numeric control with increment/decrement buttons and keyboard support. It can enforce minimum/maximum values, step sizes, page increments and number formatting.

Basic Spinner Top ↑

$( function () {
    $( "#spinner" ).spinner({
        min: 0,
        max: 100,
        step: 1
    });
});

Demo: basic Spinner with full code and CDN →

Spinner Options Top ↑

classes

Add or replace classes associated with Spinner structural elements.

$( "#spinner" ).spinner({
    classes: {
        "ui-spinner": "ui-state-highlight"
    }
});

Demo: Spinner classes →

culture

culture affects localized number parsing/formatting when the required Globalize support is available.

$( "#spinner" ).spinner({
    culture: "de-DE"
});

disabled

$( "#spinner" ).spinner({
    disabled: true
});

const disabled =
    $( "#spinner" ).spinner(
        "option",
        "disabled"
    );

$( "#spinner" ).spinner(
    "option",
    "disabled",
    false
);

Demo: disabled option →

icons

$( "#spinner" ).spinner({
    icons: {
        down: "ui-icon-triangle-1-s",
        up: "ui-icon-triangle-1-n"
    }
});

Demo: Spinner icons →

incremental

When enabled, repeated spinning can increase the step size over time.

$( "#spinner" ).spinner({
    incremental: true
});

Demo: incremental option →

max and min

$( "#spinner" ).spinner({
    min: 0,
    max: 100
});

Both limits can be read or changed through the option API.

const min =
    $( "#spinner" ).spinner(
        "option",
        "min"
    );

const max =
    $( "#spinner" ).spinner(
        "option",
        "max"
    );

Demo: minimum and maximum values →

numberFormat

Use numberFormat with Globalize when localized numeric formats are needed.

$( "#spinner" ).spinner({
    numberFormat: "n"
});

page

page controls how many steps are applied by pageUp() and pageDown().

$( "#spinner" ).spinner({
    page: 10
});

Demo: page option →

step

$( "#spinner" ).spinner({
    step: 5
});

Demo: step option →

Spinner Methods Top ↑

destroy()

$( "#spinner" ).spinner( "destroy" );

Demo: destroy() →

disable()

Disable the Spinner temporarily.

$( "#spinner" ).spinner( "disable" );
$( "#spinner" ).spinner( "enable" );

Demo: disable() and enable() →

enable()

Enable a Spinner that was previously disabled.

$( "#spinner" ).spinner( "enable" );

instance()

const instance =
    $( "#spinner" ).spinner( "instance" );

isValid()

Check whether the current value satisfies the Spinner's min/max/step rules.

const valid =
    $( "#spinner" ).spinner( "isValid" );

Demo: isValid() →

option()

const options =
    $( "#spinner" ).spinner( "option" );

Demo: display Spinner option object →

pageDown() and pageUp()

$( "#spinner" ).spinner( "pageDown" );
$( "#spinner" ).spinner( "pageUp" );

Demo: pageUp/pageDown and stepUp/stepDown →

Demo: methods with an amount parameter →

stepDown() and stepUp()

$( "#spinner" ).spinner( "stepDown", 2 );
$( "#spinner" ).spinner( "stepUp", 2 );

value()

Read the current value:

const value =
    $( "#spinner" ).spinner( "value" );

Demo: read Spinner value →

Set a new value:

$( "#spinner" ).spinner(
    "value",
    25
);

Demo: set Spinner value →

Spinner Events Top ↑

change

Runs when the value has changed and the input loses focus.

$( "#spinner" ).spinner({
    change: function ( event, ui ) {
        $( "#status" ).text(
            "Changed to: " +
            $( this ).spinner( "value" )
        );
    }
});

Demo: change event →

create

$( "#spinner" ).spinner({
    create: function () {
        console.log( "Spinner created" );
    }
});

spin

Runs while the user spins to a proposed new value.

$( "#spinner" ).spinner({
    spin: function ( event, ui ) {
        $( "#status" ).text(
            "Proposed value: " + ui.value
        );
    }
});

Demo: spin event →

start and stop

$( "#spinner" ).spinner({
    start: function () {
        $( "#status" ).text( "Spin started" );
    },

    stop: function () {
        $( "#status" ).text(
            "Spin stopped at: " +
            $( this ).spinner( "value" )
        );
    }
});

Demo: start and stop events →

Interlink Spinner and Slider Top ↑

Keep both widgets in sync when they represent the same value.

Demo: interlinked Slider and Spinner →

← Slider tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: