noUiSliderで範囲検索にスライダーを実装

FE Advanced Searchの「範囲検索」を使用すると「〜以上〜以下」「〜以降〜以前」といったように価格や期間などを範囲で検索できるようになりますが、noUiSliderを使用すると、スライダー形式でより直感的に範囲を指定できるようになります。

例：カスタムフィールドに保存された価格の範囲検索に、最小値100円／最大値50,000円のスライダーを表示

手順１）

検索項目の設定画面は以下のように設定してください：

以下のファイルをヘッダー/フッター等で読み込んでください：

<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属性を指定してください。

—
以上で、範囲検索に設定した２つの検索項目をターゲットとした、noUiSliderによるスライダーが表示されると思います。
各種オプション項目は公式ドキュメントをご参考ください。