Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
	<meta charset="UTF-8" />
5
	<title>jQuery UI Slider - Range with fixed minimum</title>
6
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11
	<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12
	<link type="text/css" href="../demos.css" rel="stylesheet" />
13
	<style type="text/css">
14
		#demo-frame > div.demo { padding: 10px !important; };
15
	</style>
16
	<script type="text/javascript">
17
	$(function() {
18
		var select = $("#minbeds");
19
		var slider = $('<div id="slider"></div>').insertAfter(select).slider({
20
			min: 1,
21
			max: 6,
22
			range: "min",
23
			value: select[0].selectedIndex + 1,
24
			slide: function(event, ui) {
25
				select[0].selectedIndex = ui.value - 1;
26
			}
27
		});
28
		$("#minbeds").click(function() {
29
			slider.slider("value", this.selectedIndex + 1);
30
		});
31
	});
32
	</script>
33
</head>
34
<body>
35
 
36
<div class="demo">
37
 
38
<form id="reservation">
39
	<label for="minbeds">Minimum number of beds</label>
40
	<select name="minbeds" id="minbeds">
41
		<option>1</option>
42
		<option>2</option>
43
		<option>3</option>
44
		<option>4</option>
45
		<option>5</option>
46
		<option>6</option>
47
	</select>
48
</form>
49
 
50
</div><!-- End demo -->
51
 
52
<div class="demo-description">
53
 
54
<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>
55
 
56
</div><!-- End demo-description -->
57
 
58
</body>
59
</html>