Spinner in jQuery UI is used to increase or decrease the value by using arrow keys or by using up/down buttons. This spinner is used for numeric inputs.
We will use the CDN link in code to add different libraries and styles. To display this Calendar like any other jQuery UI widget, we have to link to jQuery and jQuery UI. Here is a simple code with all HTML tags to display a spinner. You can just copy this code to display the spinner.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Spinner to select numeric data
</title>
<link href=
themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Spinner to
select numeric data
</h3>
<input id="spinner" size=3 value=17>
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
});
</script>
</body>
</html>
|
Output:
Default value: It is used to set the default value to the input box.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Spinner to select numeric data
</title>
<link href=
themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Spinner to
select numeric data
</h3>
<input id="spinner" size=3>
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
$( "#spinner" ).val(500)
});
</script>
</body>
</html>
|
Output:
Maximum and Minimum value: It can be set the Upper and Lower limits for the spinner.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner({
max: 20,
min: -10
});
});
</script>
|
Page value: We can set the value of Page up or Page down key button value by using page value.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner({
page:50
});
});
</script>
|
Step Value: We can set the value of up arrow or down arrow key button value by using step.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner({
step:10
});
});
</script>
|
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Oct, 2019
Like Article
Save Article