JQuery UI の スライダー と テキストボックス を連動させ、テキストボックスに spinner をつけてみます。
こんな感じです。
- 目次 -
スポンサーリンク
コード
やってることは単純で、スライダーに変化があればその値をボックスに反映、ボックスに変化があればその値をスライダーに反映しています。
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 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css" /> <script type="text/javascript"> $(function() { $('#slider-1').slider({ min: 0, max: 100, step: 1, value: 50, // slider の変更を box に反映 slide: function(e, ui) { $('#box-1').val(ui.value); }, create: function(e, ui) { $('#box-1').val($('#slider-1').slider('option', 'value')); // box の変更を slider に反映 $('#box-1').change(function() { $('#slider-1').slider('value', $('#box-1').val()); }); // spinner の初期設定 $('#box-1').spinner({ min: $('#slider-1').slider('option', 'min'), max: $('#slider-1').slider('option', 'max'), step: $('#slider-1').slider('option', 'step'), // spinner の変更を slider に反映 spin: function(e, ui) { $('#slider-1').slider('value', ui.value); } }); } }); }); </script> </head> <body> <div id="slider-1" style="width:300px;"></div> <input id="box-1" type="text" style="width: 50px; height: 18px;; font-size: 16px;" /> </body> </html> |
関数にしてみる
複数のスライダーを設置する場合、いちいちコーディングするのも面倒なので関数にしてみます。引数は
1 |
slider_id, box_id, min, max, step, value |
の 6個で、左から順番に、スライダーのID、ボックスのID、最小値、最大値、増減幅、初期値です。
下記サンプルでは、2組の 【スライダー+ボックス】 を設置しています。
コード
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css" /> <script type="text/javascript"> $(function() { // 関数 var connect_slider_box = function(slider_id, box_id, min, max, step, value) { $(slider_id).slider({ max: max, min: min, step: step, value: value, // slider の変更を box に反映 slide: function(e, ui) { $(box_id).val(ui.value); }, create: function(e, ui) { $(box_id).val($(slider_id).slider('option', 'value')); // box の変更を slider に反映 $(box_id).change(function() { $(slider_id).slider('value', $(box_id).val()); }); // spinner の初期設定 $(box_id).spinner({ min: $(slider_id).slider('option', 'min'), max: $(slider_id).slider('option', 'max'), step: $(slider_id).slider('option', 'step'), // spinner の変更を slider に反映 spin: function(e, ui ) { $(slider_id).slider('value', ui.value); } }); } }); } // 関数を呼ぶ connect_slider_box('#slider-2', '#box-2', 20, 50, 2, 30); connect_slider_box('#slider-3', '#box-3', 0, 100, 1, 0); }); </script> </head> <body> <div id="slider-2" style="width:300px;"></div> <input id="box-2" type="text" style="width: 50px; height: 18px;; font-size: 16px;" /> <div id="slider-3" style="width:200px;"></div> <input id="box-3" type="text" style="width: 50px; height: 18px;; font-size: 16px;" /> </body> </html> |
デモ
min=20, max=50, step=2, value=30 の場合
step=2 なので、動きがカクカクしています。
step=2 なので、動きがカクカクしています。
min=0, max=100, step=1, value=0 の場合
HTML5 type=”number” の場合
HTML5 で入力ボックスに type=”number” を指定すると、spinner が自動でついてきます。この場合は、JQuery の spinner が不要なので、若干ですが、簡単にコーディングできます。
コード
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 36 37 38 39 40 41 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css" /> <script type="text/javascript"> $(function() { var connect_slider_box2 = function(slider_id, box_id) { // box の変更を slider に反映 $(box_id).change(function() { $(slider_id).slider('value', $(box_id).val()); }); $(slider_id).slider({ min: Number($(box_id).attr('min')), max: Number($(box_id).attr('max')), step: Number($(box_id).attr('step')), value: Number($(box_id).attr('value')), // slider の変更を box に反映 slide: function(e, ui) { $(box_id).val(ui.value); }, }); } connect_slider_box2('#slider-4', '#box-4') }); </script> </head> <body> <div id="slider-4" style="width:300px;"></div> <input id="box-4" type="number" min="0" max="100" step="2" value="50" style="width: 100px; height: 18px;; font-size: 16px;" /> </body> </html> |
デモ
こちらの spinner を押し続けた場合、JQuery のspinner を使うケースと違って、slider はリアルタイムでは連動しません。