<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form id="form">
<p id="price">
<label>
價錢範圍
<input type="text" id="amount">
</label>
</p>
<div id="priceRange"></div>
<p>
<label>
到貨時間
<input type="text" id="arrival">
</label>
</p>
</form>
<script type="text/javascript">
$('#arrival').datepicker();
$('#priceRange').slider({
range:true, //兩個端點
min:0,
max:400,
values:[175,300], //頁面載入時的兩端點值
slide:function(e,number){ //事件發生時，印出數字
$('#amount').val('$'+number.values[0]+' -$'+number.values[1]);
}
});
/*把上面設定好的兩個值放進去*/
$('#amount').val('$'+$('#priceRange').slider('values',0)+' -$'+$('#priceRange').slider('values',1));
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
