setting input text from UI Slider

setting input text from UI Slider

Hi there,  I am trying to display the values from a slider as I change it.  I can only get the text to init properly, but not update upon changing the value with the mouse.  Could someone please suggest a solution?

Thanks.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  7.    
  8.     <style type="text/css">
  9.         #slider01 { margin: 10px; }
  10.         #slider02 { margin: 10px; }   
  11.     </style>
  12.  
  13.     <script>
  14.      
  15.         $(document).ready( function() {
  16.             s = $("#slider01").slider();
  17.             s.slider('option', {min: 1, max: 40});
  18.             s.slider('option', 'value', 2);
  19.             $("#val01").val( s.slider('value') );
  20.            
  21.         });
  22.     </script>
  23. </head>
  24. <body style="font-size:62.5%;"> 
  25.     <div id="slider01"></div>
  26.     <input type="text" id="val01"/>
  27.    
  28. </body>
  29. </html>