|
7
|
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.10.2.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>
|
