【Wordpress】valueに日本語を用いた絞り込み検索をinput type=rangeのような挙動で行いたい

前提

Wordpressの記事絞り込み検索にて、このページの築年数部分ような事をしたいと思い錯誤しています。

実現したいこと

初めにpriceと言うカテゴリーを作り、中に

「100万円、200万円、300万円、400万円、500万円、600万円、700万円、800万円、900万円、1000万円」

上記のように計12個の分類を作成をしました。
※スラッグがそれぞれ「price100～price1000」で設定しています。

これを元に絞り込み検索フォームを作成しようとした所、範囲検索（下減なしから500万円まで）などを実装する方法及びValue内を表示させる所で躓いてしまっております。

試した事①

初めに範囲検索の定番でもあるinput type="range"を使ってみましたが、そもそも値の部分が数字でしか設定が行えなかった為
この方法に沿って行ってみましたが

<div>総額：<span class="price_text"></span></div> <input type="range" list="price-datalist" class="price-data" step="12"> <datalist id="price-datalist"> <option value="">下限なし</option> <option value="price100">100万円</option> <option value="price200">200万円</option> <option value="price300">300万円</option> <option value="price400">400万円</option> <option value="price500">500万円</option> <option value="price600">600万円</option> <option value="price700">700万円</option> <option value="price800">800万円</option> <option value="price900">900万円</option> <option value="price1000">1000万円</option> <option value="pricemax">上限なし</option> </datalist> <script> function render (output, value) { output.innerHTML = value } const input = document.querySelector('.price-data') const output = document.querySelector('.price_text') input.addEventListener('input', function (e) { render(output, e.target.value) }, false) render(output, input.value) </script>

上記のように試してみましたが値を拾って貰えず、また<span class="price_text"></span>の部分も50と言った風に出てしまい、Value内容やラベル内容の表示もされませんでした。

rangeですと、やりたい事が行えないと思い、次にチェックボックスを用いた方法で下記方法を試してみました。

試した事②

<div class="sample"> <input type="checkbox" name="s3" id="select1" value="" checked=""> <label for="select1"></label> <input type="checkbox" name="s3" id="select2" value="price100"> <label for="select2"></label> <input type="checkbox" name="s3" id="select3" value="price200"> <label for="select3"></label> <input type="checkbox" name="s3" id="select4" value="price300"> <label for="select4"></label> <input type="checkbox" name="s3" id="select5" value="price400"> <label for="select5"></label> <input type="checkbox" name="s3" id="select6" value="price500"> <label for="select6"></label> <input type="checkbox" name="s3" id="select7" value="price600"> <label for="select7"></label> <input type="checkbox" name="s3" id="select8" value="price700"> <label for="select8"></label> <input type="checkbox" name="s3" id="select9" value="price800"> <label for="select9"></label> <input type="checkbox" name="s3" id="select10" value="price900"> <label for="select10"></label> <input type="checkbox" name="s3" id="select11" value="price1000"> <label for="select11"></label> <input type="checkbox" name="s3" id="select12" value=""> <label for="select12"></label> </div> <style> .sample input{ display: none; } .sample label{ display: inline-block; float: left; cursor: pointer; width: 80px; height: 30px; margin: 0; padding: 0 5px; border-right: 0px solid #abb2b7; background: #ccct; font-size: 14px; text-align: center; line-height: 1; transition: .2s; } .sample label:first-of-type{ border-radius: 3px 0 0 3px; } .sample label:last-of-type{ border-right: 0px; border-radius: 0 3px 3px 0; } .sample input[type="radio"]:checked + label { background: #fff000; position: relative; color: #fff; } </style>

この方法ですと、1つ越えて選択をしてしまったり、また1番高い値をチェックしてもそれより低い部分（左）までチェックが自動で出来なかったので、うまくいきませんでした。

理想は、このページの築年数部分のように、rangeを使ったような挙動でチェックボックスなどで同等の動きが出来き、別箇所にValue内容を表示できるような仕組みなのですが、試した事以外で方法などが見つからず躓いております。

お手数では御座いますが、お知恵お借りできれば幸いです。

完全にドツボにはまってしまっており、まとまりのない文章で申し訳ございません。

よろしくお願いいたします。