タグ: JavaScript, noUiSlider, スライダー, 範囲検索
-
投稿者投稿
-
2021年9月9日 15:25 #6845
FirstElement 宮澤
キーマスターFE Advanced Searchの「範囲検索」を使用すると「〜以上〜以下」「〜以降〜以前」といったように価格や期間などを範囲で検索できるようになりますが、noUiSliderを使用すると、スライダー形式でより直感的に範囲を指定できるようになります。
例:カスタムフィールドに保存された価格の範囲検索に、最小値100円/最大値50,000円のスライダーを表示
手順1)
検索項目の設定画面は以下のように設定してください:
以下のファイルをヘッダー/フッター等で読み込んでください:
<link href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js"></script>
フッターのwp_footer()より後に以下を記述してください:
<script> var range = document.getElementById('feas-range'); noUiSlider.create(range,{ start:[100,50000], step:100, margin:100, connect:true, direction:'ltr', orientation:'horizontal', behaviour:'tap-drag', range:{ 'min':100, 'max':50000 }, format:wNumb({ decimals:0, }), }); // FEAS検索項目のテキストフィールドのID属性 var inputMin = document.getElementById('feas_0_0'); // 下限 var inputMax = document.getElementById('feas_0_1'); // 上限 // スライダーに変更があったらテキストフィールドを更新 range.noUiSlider.on('update',function(values,handle){ var value = values[handle]; if(handle){ inputMax.value = value; }else{ inputMin.value = value; } }); // テキストフィールドに変更があったらスライダーを更新 inputMin.addEventListener('change',function(){ range.noUiSlider.set([this.value,null]); }); inputMax.addEventListener('change',function(){ range.noUiSlider.set([null,this.value]); }); </script>
コード中段のfeas_0_0、feas_0_1は実際の範囲検索に使用する検索項目に付与されたid属性を指定してください。
—
以上で、範囲検索に設定した2つの検索項目をターゲットとした、noUiSliderによるスライダーが表示されると思います。
各種オプション項目は公式ドキュメントをご参考ください。 -
投稿者投稿
1件の投稿を表示中 - 1 - 1件目 (全1件中)
- このトピックに返信するにはログインが必要です。