title: Limiting values in the spinner field
body: <p>I have a form with an input field box.here i used a spinner which can be increased or decreased using the buttons on it.Here i need to make value of input field with id spinner within certain limit (like 1-31) (ie,we can't decrease the value below 1 and increase above 31 by clicking spinner button) using jquery or ajax.How should i do that??Please help me.below is my code.</p>
  
  <p>spinner.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;jQuery UI Spinner - Default functionality&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/
                jquery-ui.css"&gt;
          &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;script src="/resources/demos/external/jquery.mousewheel.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;script&gt;
              $(function() {
                  var spinner = $( "#spinner" ).spinner();
                  $( "#disable" ).click(function() {
                      if ( spinner.spinner( "option", "disabled" ) ) {
                          spinner.spinner( "enable" );
                      } else {
                          spinner.spinner( "disable" );
                      }
                  });
                  $( "#destroy" ).click(function() {
                      if ( spinner.data( "ui-spinner" ) ) {
                          spinner.spinner( "destroy" );
                      } else {
                          spinner.spinner();
                      }
                  });
                  $( "#getvalue" ).click(function() {
                      alert( spinner.spinner( "value" ) );
                  });
                  $( "#setvalue" ).click(function() {
                      spinner.spinner( "value", 5 );
                  });
                  $( "button" ).button();
              });
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              &lt;label for="spinner"&gt;Select a value:&lt;/label&gt;
              &lt;input id="spinner" name="value"&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;button id="disable"&gt;Toggle disable/enable&lt;/button&gt;
              &lt;button id="destroy"&gt;Toggle widget&lt;/button&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;button id="getvalue"&gt;Get value&lt;/button&gt;
              &lt;button id="setvalue"&gt;Set value to 5&lt;/button&gt;
          &lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>