Jquery UI spinner() Method

Date Published: 08/05/2020 Published By: JaiSchool

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

PropertyValue
min5
max10
iconsJquery 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

Leave a Reply

Your email address will not be published.