site/swingjs/jquery/swingjs-slider.htm

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