Front Page フォーラム 使い方全般 noUiSliderで範囲検索にスライダーを実装

1件の投稿を表示中 - 1 - 1件目 (全1件中)
  • 投稿者
    投稿
  • #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件中)
  • このトピックに返信するにはログインが必要です。

FE Advanced Search

¥59,800

  • サイト数無制限
  • 技術サポート回数無制限
  • 将来アップデート無料

「こんな検索できる?」「PHPやCSS詳しくないのだけど…」など、わからないことやご不安がありましたらお気軽にご相談ください。