New file |
0,0 → 1,59 |
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8" /> |
<title>jQuery UI Slider - Range with fixed minimum</title> |
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> |
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> |
<link type="text/css" href="../demos.css" rel="stylesheet" /> |
<style type="text/css"> |
#demo-frame > div.demo { padding: 10px !important; }; |
</style> |
<script type="text/javascript"> |
$(function() { |
var select = $("#minbeds"); |
var slider = $('<div id="slider"></div>').insertAfter(select).slider({ |
min: 1, |
max: 6, |
range: "min", |
value: select[0].selectedIndex + 1, |
slide: function(event, ui) { |
select[0].selectedIndex = ui.value - 1; |
} |
}); |
$("#minbeds").click(function() { |
slider.slider("value", this.selectedIndex + 1); |
}); |
}); |
</script> |
</head> |
<body> |
|
<div class="demo"> |
|
<form id="reservation"> |
<label for="minbeds">Minimum number of beds</label> |
<select name="minbeds" id="minbeds"> |
<option>1</option> |
<option>2</option> |
<option>3</option> |
<option>4</option> |
<option>5</option> |
<option>6</option> |
</select> |
</form> |
|
</div><!-- End demo --> |
|
<div class="demo-description"> |
|
<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> |
|
</div><!-- End demo-description --> |
|
</body> |
</html> |