Basic tutorials

A simple spinner with a range of 1-1000.

Show code   <style>
   .aSpinner
   {
    background-image:url('/__img/spinthewheel/overlay.png');
    width:454px;
    height:25px;
   }
   .aSpinner div
   {
    font-family:arial,verdana,sans-serif;
    color:#666666;
    font-size:20px;
    font-weight:bold;
   }
  </style>
  <script type="text/javascript">
   $(document).ready(function() {
     $('.aSpinner').spinTheWheel({defaultValue:1,minValue:1,maxValue:1000,valueSpan:10 });
    });

  </script>
  ...
  <div class="aSpinner"></div>


---

This time we had value span of 10.
Show code   <script type="text/javascript">
   $(document).ready(function() {
     $('.aSpinner').spinTheWheel({defaultValue:1,minValue:1,maxValue:1000,valueSpan:10 });
    });



---

Add a callback function.
Show code   <script type="text/javascript">
   $(document).ready(function() {
     $('.aSpinner').spinTheWheel({defaultValue:1,minValue:1,maxValue:1000,valueSpan:10,callback:function( value ){ $('#output').val( value ) } });
    });
...
<input type="text" id="output"/>