Spinner Jquery UI
In this article, we will see how to create a spinner widget jquery UI and what is use the use of spinner widget.
Spinner widget
The spinner widget indicates a Spinner UI control used for a range of numeric values.
A step-by-step guide to spinner widget
Step 1:
Create a new HTML document with basic HTML document structure code by linking jquery UI library files
<!DOCTYPE html>
<html>
<head>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Step 2:
To create a spinner widget: we need to create a text input field like as below code.
<input type="text" value="0" id="spinner"/>Step 3:
Select the element using the jQuery selector, and call the spinner jquery UI function on it.
<script type="text/javascript">
$("#spinner").spinner(); // +ve as well as -ve values
<script>Example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" value="0" id="spinner"/>
<script type ="text/javascript">
$("#spinner").spinner(); // +ve as well as -ve values
</script>
</body>
</html>Output:
See the above output, the spinner is displayed with value ‘0’ because we set the “value” to 0. We can give positive and negative values to the “value” attribute of <input> tag. If you click on the up arrow button on the spinner, the value is incremented by 1. If you click on the down arrow button on the spinner, the value is decremented by 1.
