topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#javascript-code-25-slider.htm / htm


  <html>
  <head>
      <title>script.aculo.us – Slider Input Demo</title>
      <script src="prototype.js" type="text/javascript"></script>
      <script src="scriptaculous.js" type="text/javascript"></script>
      <script type="text/javascript">
      window.onload = function(){
          // Turn the element with an ID of ageHandle into the draggable
          // slider handle and the element with an ID of ageBar into the
          // slider bar
          new Control.Slider( 'ageHandle', 'ageBar', {
              // When the slider is moved, or finished moving,
              // call the updateAge function
              onSlide: updateAge
          });
  
          // Handles any movements that occur within the slider
          function updateAge(v) {
              // When the slider updates, update the value of the age
              // element to represent the user’s current age
              $('age').value = Math.floor( v * 100 );
          }
      };
      </script>
  </head>
  <body>
      <h1>Slider Input Demo</h1>
  
      <form action=”” method=”POST”>
          <p>How old are you? <input type=”text” name=”age” id=”age” /></p>
  
          <div id="ageBar" style="width:200px; background: #000; height:5px;">
              <div id="ageHandle" style="width:5px; height:10px; 
                  background: #000; cursor:move;"></div>
          </div>
  
          <input type=”submit” value=”Submit Age”/>
      </form>
  </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.