数値の範囲を指定するレンジスライダーが簡単に実装できるjQueryプラグイン「noUiSlider」。レスポンシブにも対応しています。 ある案件でデザインを再現するにあたりカスタマイズする必要があったので、今回はそのカスタマイズした内容をご紹介します。 デモはこちら。
カスタマイズした内容は主に以下の２点です。- スライダーのつまみをドラッグしている時、現在の数値を吹き出しで表示する
- 最大値を「∞」にする
実際のコードは以下です。
html|
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 |
<html> <head> <meta charset="UTF-8"> <title>DEMO</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/wNumb.js"></script> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/jquery.nouislider.min.css"> </head> <body> <!-- リアルタイムに数値を表示 --> <p class="meter"><span id="skip-value-nav-lower"></span>km 〜 <span class="upperNum"><span id="skip-value-nav-upper"></span><span class="kmTxt">km</span></span></p> <!-- スライダーを表示 --> <div id="rangeNavSlide"></div> <!-- スライダーの記述の後に読み込む --> <script type="text/javascript" src="js/nouislider.js"></script> <script type="text/javascript" src="js/rangeNavSlide.js"></script> </div> </body> </html> |
|
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 |
/* 吹き出し用の記述 */ .popLowerNum, .popUpperNum { display:block; width:54px; line-height:1; text-align:center; border-radius:10px; font-size:14px; color:#fff; background:#3FB8AF; padding:9px 0; top:-42px; left:50%; margin-left:-27px; position:absolute; z-index:100; } .popLowerNum:after, .popUpperNum:after { content:""; display:block; position:absolute; border:5px solid transparent; border-top:6px solid #3FB8AF; bottom:-10px; left:50%; margin-left:-5px; } |
|
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 58 59 |
/* レンジスライダー化するIDを指定 */ var rangeSlide = document.getElementById('rangeNavSlide'); /* noUiSliderのオプション */ noUiSlider.create(rangeSlide,{ start: [50, 200], connect: true, format: wNumb({ decimals: 0 }), range: { 'min': 0, 'max': 300 } }); /* 吹き出し用に最小、最大の値を変数化 */ var rangeNavValues = [ document.getElementById('skip-value-nav-lower'), document.getElementById('skip-value-nav-upper') ]; /* 変更される数値をリアルタイムに取得して、吹き出しに挿入 */ rangeSlide.noUiSlider.on('update', function( values, handle ) { rangeNavValues[handle].innerHTML = values[handle]; }); rangeSlide.noUiSlider.on('update', function(){ var upperNum = $("#skip-value-nav-upper").text(); var lowerNum = $("#skip-value-nav-lower").text(); $(".popUpperNum").text(upperNum); $(".popLowerNum").text(lowerNum); /* 最大値のときは∞にする */ $(function(){ if (upperNum === '300'){ $("#skip-value-nav-upper").text('∞'); $(".popUpperNum").text('∞'); $(".navSearch .kmTxt").hide(); } else { $(".navSearch .kmTxt").show(); } }); /* スライダーをドラッグしている時のみ吹き出しを表示する */ $(".noUi-handle-upper").mousedown(function(){ $(this).html('<p class="popUpperNum">' + upperNum + '</p>'); }); $(".noUi-handle-upper").mouseup(function(){ $(this).html(''); }); $(".noUi-handle-lower").mousedown(function(){ $(this).html('<p class="popLowerNum">' + lowerNum + '</p>'); }); $(".noUi-handle-lower").mouseup(function(){ $(this).html(''); }); }); |
