site/swingjs/jquery/swingjs-slider.htm

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8">
   5   <title>SwingJS/jQuery UI Slider</title>
   6         <script src="jQuery.js"></script>
   7
   8         <link href="jquery-ui-core1.css" rel="stylesheet">
   9
  10   <script src="JQuery_UI_Core1.js"></script>
  11
  12         <script src="jquery-ui-slider.js"></script>
  13         <link href="jquery-ui-slider.css" rel="stylesheet">
  14
  15   <script>
  16   $(document).ready(function() {
  17     $( "#slider" ).slider({
  18       orientation: "horizontal",
  19       range: false,
  20       min: 0,
  21       max: 100,
  22       value: 11,
  23       slide: function( event, ui ) {
  24         $( "#amount" ).val( ui.value );
  25       }
  26     });
  27     $( "#amount" ).val( $( "#slider" ).slider( "value" ) );
  28   });
  29   </script>
  30 </head>
  31 <body>
  32
  33 <p>
  34   <label for="amount">Volume:</label>
  35   <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  36 </p>
  37
  38 <div id=wrap class="swingjs">
  39 <div id="slider" style="width:200px;height:5px;font-size:10px"></div>
  40 </div>
  41
  42
  43 </body>
  44 </html>