jQuery UI spinner

jQuery UI spinner widgets are used to add a up/down arrow to the input box thus allowing the user to increase and decrease the value in the input box. It facilitates the users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel.

It has also some extended features like:

It facilitates you to skip values.
It also enables globalized formatting options (i.e. currency, decimals, thousand separators etc.)

Syntax:

You can use spinner () method in two forms:

First Method

The spinner (options) method specifies that an HTML element and its contents should be treated and managed as spinner. Here ?options? parameter is an object that specifies the appearance and behavior of the spinner elements involved.

You can use one or more options at a time using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

Option	Description
culture	This option sets the culture to use for parsing and formatting the value. By default its value is null which means the currently set culture in globalize is used.
disabled	If you set this option to true, it disables spinner. By default its value is false.
icons	This option is used to set icons to use for buttons, matching an icon provided by the jQueryUI CSS framework. By default its value is { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" } .
incremental	This option controls the number of steps taken when holding down a spin button. By default its value is true.
max	This option is used to identify the maximum allowed value. By default its value is null which means there is no maximum enforced.
min	This option is used to identify the minimum allowed value. By default its value is null which means there is no minimum enforced.
numberFormat	This option specifies a 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.
page	This option indicates the number of steps to take when paging via the pageup/pagedown methods. By default its value is 10.
step	This option specifies the 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.

jQuery UI spinner example 1

With no parameter to the spinner() method:

Let's take a simple example to demonstrate spinner widget functionality, passing no parameter to the spinner() method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- JavaScript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="example">
         <input type="text" id="spinner-1" value="0" />
      </div>
   </body>
</html>

Test it Now

jQuery UI spinner example 2

Use of min, max and step options:

Let's take an example to demonstrate the usage of options min, max and step in the spinner widget of jQueryUI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -50, 
               max: 50
            });
            $('#spinner-3').spinner({
               step: 1000, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="example">
         Spinner Min, Max value set:
         <input type="text" id="spinner-2" value="0" /><br><br>
         Spinner increments/decrements in step of of 1000:
         <input type="text" id="spinner-3" value="0" />
      </div>
   </body>
</html>

Test it Now

Second Method

The spinner ("action", params) method is used to perform an action on spinner elements, such as enabling/disabling the spinner. The action is specified as a string in the first argument (e.g., "disable" disables the spinner).

Following is a list of different actions that can be used with this method:

Action	Description
destroy	This action is used to destroy the spinner functionality of an element completely and the elements return to their pre-init state. This method does not accept any arguments.
disable	This action is used to disable the spinner functionality. This method does not accept any arguments.
enable	This action is used to enable the spinner functionality. This method does not accept any arguments.
option( optionName )	This action gets the value currently associated with the specified optionName. Here optionName is the name of the option to get.
option	This action gets an object containing key/value pairs representing the current spinner options hash. This method does not accept any arguments.
option(optionName, value)	This action sets the value of the spinner option associated with the specified optionName.
option(options)	this action sets one or more options for the spinner.
pageDown( [pages ] )	This action decrements the value by the specified number of pages, as defined by the page option.
pageUp( [pages ] )	This action increments the value by the specified number of pages, as defined by the page option.
stepDown( [steps ] )	This action is used to decrement the value by the specified number of steps.
stepUp( [steps ] )	This action increments the value by the specified number of steps.
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.
value(value)	This action is used to set the value.
widget	This action is used to return the spinner widget element; the one annotated with the UI-spinner class name.

jQueryUI spinner() example 3

Use of stepUp, stepDown, pageUp and pageDown:

Let's take an example to demonstrate the use of stepUp, stepDown, pageUp and pageDown method:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-6 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <input id="spinner-6" />
      <br/>
      <button id="stepUp-2">Increment</button>
      <button id="stepDown-2">Decrement</button>
      <button id="pageUp-2">Increment Page</button>
      <button id="pageDown-2">Decrement Page</button>
   </body>
</html>

Test it Now

jQueryUI spinner() example 4

Use of action enable and disable:

Let's take an example to demonstrate the use of action enable and disable:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-7 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <input id="spinner-7" />
      <br/>
      <button id="stepUp-3">Enable</button>
      <button id="stepDown-3">Disable</button>
   </body>
</html>

Test it Now

Next TopicjQuery UI Tabs

← prev next →