jQueryUIでスライダーを表示する
jQueryUIでスライダーを表示します。
数値を入力する時にスライダーを使用します。
まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<link type="text/css" href="../css/jquery-ui.css" rel="stylesheet" />スライダーにはいろいろなオプションがあります。
| max | スライダーの最大値 |
| min | スライダーの最小値 |
| range | “min” or “max” |
| value | スライダーの初期値 |
<body>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
$("#slider").slider({
range:"min",
value:5,
max:10,
min:1,
slide:function(evnet,ui){
$("#crank").val(ui.value)
}
});
});
</script>
<form name="testForm">
<label for="rank">ランクを選択してください:</label>
<select name="rank" id="crank" value="">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5" selected>5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
</select>
<br /><br />
<!-- スライダー表示 -->
<div id="slider"></div>
</form>
</body>スライダーを動かすとセレクトボックスの値が変わり、逆にセレクトボックスの値を変えても、スライダーの値は変わりません。
セレクトボックス変更時にスライダーを変更するにはセレクトボックスのchangeイベントに処理を記述する必要があります。
$("#crank").change(function(){
$("#slider").slider("value",$("#crank").val());
});スライダー自体はあまり使い道がないように思います。
jquery.uiの詳細はこちらをどうぞ。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント