third-party/jquery-ui-1.10.2/demos/slider/hotelrooms.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Slider - Slider bound to select</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../ui/jquery.ui.slider.js"></script>
  12         <link rel="stylesheet" href="../demos.css">
  13         <script>
  14         $(function() {
  15                 var select = $( "#minbeds" );
  16                 var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
  17                         min: 1,
  18                         max: 6,
  19                         range: "min",
  20                         value: select[ 0 ].selectedIndex + 1,
  21                         slide: function( event, ui ) {
  22                                 select[ 0 ].selectedIndex = ui.value - 1;
  23                         }
  24                 });
  25                 $( "#minbeds" ).change(function() {
  26                         slider.slider( "value", this.selectedIndex + 1 );
  27                 });
  28         });
  29         </script>
  30 </head>
  31 <body>
  32
  33 <form id="reservation">
  34         <label for="minbeds">Minimum number of beds</label>
  35         <select name="minbeds" id="minbeds">
  36                 <option>1</option>
  37                 <option>2</option>
  38                 <option>3</option>
  39                 <option>4</option>
  40                 <option>5</option>
  41                 <option>6</option>
  42         </select>
  43 </form>
  44
  45 <div class="demo-description">
  46 <p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
  47 </div>
  48 </body>
  49 </html>