To add an up/down arrow to the input box, the jQuery UI spinner widgets are used. Thus, we can increase and decrease the value in the input box using the jQuery UI spinner widgets. It is mainly used to type a value directly. It can also be used to modify an existing value by spinning with the keyboard, mouse, or scroll wheel. Along with these popular features, the extended features of the jQuery UI spinner widgets are that they allow the users to skip values and also enable the globalized formatting options. The globalized formatting options mean the currency, decimals, thousand separators, etc.
Syntax:
The spinner() method can be used in two forms:
$(selector, context).spinner (options) Method
OR
$(selector, context).spinner (“action”, params) Method
First Method:
To instruct that an HTML element and its contents should be treated and managed as a spinner, the spinner (options) method is used. The appearance and behavior of the spinner elements involved are defined by the options parameter, which is an object.
Syntax:
$(selector, context).spinner (options)
Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.
Syntax:
$(selector, context).spinner ({option1: value1, option2: value2.....});
The various options that can be used with this method are listed below:
| Option | Uses |
| culture | To set the culture to use for parsing and formatting the value. The default value is null. The null value implies that the currently set culture in globalize is used. |
| disabled | To disable the spinner, when set to true. The default value is false. |
| icons | To set icons to use for buttons, matching an icon provided by the jQueryUI CSS framework. The default value is { down: “ui-icon-triangle-1-s”, up: “ui-icon-triangle-1-n” }. |
| incremental | To control the number of steps taken when holding down a spin button. The default value is true. |
| max | To identify the maximum allowed value. The default value is null. The null value implies that there is no maximum enforced. |
| min | To identify the minimum allowed value. The default value is null. The null value implies that there is no minimum enforced. |
| numberFormat | To define the format of numbers passed to globalize, if available. The common formats are “n” for a decimal number and “c” for a currency value. The default value is null. |
| page | To indicate the number of steps to take when paging via the pageup/pagedown methods. The default value is 10. |
| step | To define the size of the step to take when spinning via buttons or the stepup()/stepdown() methods. If the option is not explicitly set, the element’s step attribute is used if it exists. |
Example 1:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#spin input {}
</style>
<!-- JavaScript -->
<script>
$(function() {
$( "#spin" ).spinner();
});
</script>
</head>
<body>
<!-- HTML -->
<div id="spnr">
<input type="text" id="spin" value="1" />
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the spinner widget functionality. Here, we are passing no parameter to the spinner() method.
Example 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#spin-1,#spin-2 input {width: 50px}
</style>
<!-- Javascript -->
<script>
$(function() {
('#spin-2').spinner({
step: 200,
min: -10000,
max: 10000
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="spnr">
Min and Max value set:
<input type="text" id="spin-1" value="1" /><br><br>
Increments/decrements in step of 200:
<input type="text" id="spin-2" value="200" />
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the usage and the behavior of options min, max, and step in the spinner widget of jQueryUI.
Second Method:
To act on spinner elements, the spinner (“action”, params) method is used. It can be used to perform actions like enabling/disabling the spinner. The first argument here is “action” which is specified as a string. To disable the spinner, the “disable” value is passed to the action parameter.
Syntax:
$(selector, context).spinner ("action", params)
The various actions that can be used with this method are listed below:
| Action | Uses |
| destroy | To destroy the spinner functionality of an element completely and the elements return to their pre-init state. No argument is accepted by this method. |
| disable | To disable the spinner functionality. No argument is accepted by this method. |
| enable | To enable the spinner functionality. No argument is accepted by this method. |
| option( optionName ) | To retrieve the value currently associated with the specified optionName. The name of the option to get is specified by the optionName. |
| option | To retrieve an object containing key/value pairs representing the current spinner options hash. No argument is accepted by this method. |
| option(optionName, value) | To set the value of the spinner option associated with the specified optionName. |
| option(options) | To set one or more options for the spinner. |
| pageDown( [pages ] ) | To decrement the value by the specified number of pages, as defined by the page option. |
| pageUp( [pages ] ) | To increment the value by the specified number of pages, as defined by the page option. |
| stepDown( [steps ] ) | To decrement the value by the specified number of steps. |
| stepUp( [steps ] ) | To increment the value by the specified number of steps. |
| value | To retrieve the current value as a number. Based on the numberFormat and culture options, the value is parsed. No argument is accepted by this method. |
| value(value) | To set the value. |
| widget | To get the spinner widget element; the one annotated with the UI-spinner class name. |
Example 3:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#spin input {}
</style>
<!-- Javascript -->
<script>
$(function() {
('button').button();
('#stepDown-1').click(function () {
('#pageUp-1').click(function () {
('#pageDown-1').click(function () {
$("#spin").spinner("pageDown");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id="spin" />
<br/>
<br/>
<button id="stepUp-1">Increment</button>
<br/>
<button id="stepDown-1">Decrement</button>
<br/>
<button id="pageUp-1">Page Increment</button>
<br/>
<button id="pageDown-1">Page Decrement</button>
</body>
</html>
Explanation:
In the above example, we are displaying the usage and the behavior of the stepUp, stepDown, pageUp, and pageDown methods. Here, on clicking the increment or decrement button, the spinner increases or decreases by 1 respectively. However, on clicking the page increment or page decrement button, the spinner increases or decreases by 10 respectively.
Example 4:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#spin input {}
</style>
<!-- Javascript -->
<script>
$(function() {
('button').button();
('#disable-1').click(function () {
$("#spin").spinner("disable");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id="spin" />
<br/>
<br/>
<button id="enable-1">Enable</button>
<button id="disable-1">Disable</button>
</body>
</html>
Explanation:
In the above example, we are displaying the usage and the behavior of the enable and disable actions. Here, on clicking the disable button, the spinner gets disabled, which can be enabled again using the enable button.
