jQueryUIでスライダーを表示します。
数値を入力する時にスライダーを使用します。
まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。
|
1 2 3 |
<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 | スライダーの初期値 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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イベントに処理を記述する必要があります。
|
1 2 3 |
$("#crank").change(function(){ $("#slider").slider("value",$("#crank").val()); }); |
スライダー自体はあまり使い道がないように思います。
jquery.uiの詳細はこちらをどうぞ。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
