Jquery UI's spinner() method is used to design the element with type="number" attribute.
Create an input field and set attribute type="text" not type="number" because the method spinner() will automatically design it for number.
Example>
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI spinner()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<input type="text" name="number" id="inp" />
<script>
$(document).ready(function(){
$("#inp").spinner();
});
</script>
</body>
</html>Use CSS to remove outline #inp:focus{outline:none;}
Options of the spinner() method
| Property | Value |
|---|---|
| min | 5 |
| max | 10 |
| icons | Jquery ui icons |
min Option
The spinner can't have a value below, defined in the min option when you give it by up and down arrow.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI spinner()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>#inp:focus{outline:none;}</style>
</head>
<body>
<input type="text" name="number" id="inp" />
<script>
$(document).ready(function(){
$("#inp").spinner({
min:15,
});
});
</script>
</body>
</html>max Option
Maximum will not be more than defined in the max if you press up and down icons.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI spinner()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>#inp:focus{outline:none;}</style>
</head>
<body>
<input type="text" name="number" id="inp" />
<script>
$(document).ready(function(){
$("#inp").spinner({
min:2,
max:9,
});
});
</script>
</body>
</html>icons Option
You can change up and down icons using icons option.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI spinner()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>#inp:focus{outline:none;}</style>
</head>
<body>
<input type="text" name="number" id="inp" />
<script>
$(document).ready(function(){
$("#inp").spinner({
icons:{
up:" ui-icon-circle-arrow-n",
down:" ui-icon-circle-arrow-s",
}
});
});
</script>
</body>
</html>Official documentation:- https://api.jqueryui.com/spinner/
Publish A Comment