チェックボックス、もしくはラジオボタンを用いた絞り込み検索でinput type=rangeのような挙動で行いたい

Question

前提

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内容を表示できるような仕組みなのですが、試した事以外で方法などが見つからず躓いております。

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

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

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

Comments

[Cocode]

すみませんご質問の内容が私の理解不足で正確に解釈できている自信がないのですが、

https://jsfiddle.net/4xynrsgu/2/
↑こういうことでしょうか…？

[Cocode]

ご質問には「このページの築年数部分」とありますが、もしかして「専有面積」の部分が実装したいものでしょうか…？

[KazuhiroHatano]

> それより低い部分（左）までチェックが自動

これは、たとえばprice500の選択は、price100〜price400も選択していることにしたいということですか？

[Hiyoko_mochi]

＞Cocode様

コメントありがとうございます。

Cocode様の仰っている事と同じ事を最初行っていたのですが、これですとWordpressで絞り込み検索を行う上で数字しかValueに入力できず、スラッグでの検索ができない・下限無し・上限なしと言う所まで出来なかったので、次にチェックボックスやラジオボタンを用いた方法を試してみたのですが、うまくいかず・・・と言う流れです；

＞KazuhiroHatano様

コメントありがとうございます。

仰る通りです。
範囲検索というと語弊が出てしまいそうですが、input rangeですとValueの面で弊害が出てしまいますので、input rangeの見た目や動きでチェックボックス式が出来れば・・と思い試行錯誤している状態です・・。

Answer 1

alpine.jsで簡単に

https://codepen.io/synchrovision/pen/xxJeYaW

alpine.jsならこの程度はJSのコードを書くことなくできます。
alpine.jsいいですよ。

Comments

[Hiyoko_mochi]

＞KazuhiroHatano 様

ご回答ありがとうございます。

alpine.jsを知らなかったので、調べていて、ご返信遅くなりました。

頂いた内容を元に2つのつまみを設定しながら下限・上限を設ける方法がないかと

https://codepen.io/kuronekonnc/pen/abjrmLb

こちらのようにはしてみましたが、rangeが重ならず、
MAXまで行った場合は上限なし、0の場合は下限なしと表示させれるような方法が見つからず・・なのですが、ご教授頂く事は可能でしょうか？

お手数おかけし申し訳ございません・・。

[KazuhiroHatano]

range inputに２つコントロールを置くのは無理なので、参考サイトに同じくjsでゴニョゴニョやらざるを得ないですね。

まあjQueryUIにはお望みのものがあるんですが、今から作るものにjQueryUI使うのもなんだかなぁって気がしちゃいます。
WordPressに内蔵されてるし、WordPressが今更脱jQueryするビジョンが見えないんで、せっかくあるんだから使うというのも選択肢とは思いますが。

https://jqueryui.com/slider/#range
https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script

[Hiyoko_mochi]

検証や模索でお時間かかってしまい、お返事遅れて申し訳ございません。

色々調べて
https://codepen.io/kuronekonnc/pen/NWBZLNj

上記までは何とか辿り着く事が出来ました。
ここから、検索のトリガーに繋ぎ込めればと思いますので、また色々試してみたいと思います。
ご回答頂きありがとうございました。

Answer 2

input type="range"を使ってみましたが、そもそも値の部分が数字でしか設定が行えなかった為

JavaScriptで値を取って、price100のような形式に変換してはどうでしょうか。

Comments

[Hiyoko_mochi]

＞maisumakun様

ご回答ありがとうございます。

その内容ですと、例えばValue="100"をprice100にする・・と言う認識で合ってますでしょうか？
検索フォームのタグでは

<datalist id="price-datalist">
<option value="">下限なし</option>
<option value="100">100万円</option>
<option value="200">200万円</option>
<option value="300">300万円</option>
<option value="400">400万円</option>
<option value="500">500万円</option>
<option value="600">600万円</option>
<option value="700">700万円</option>
<option value="800">800万円</option>
<option value="900">900万円</option>
<option value="1000">1000万円</option>
<option value="">上限なし</option>
</datalist>

こういう風になり、検索結果に表示をさせる前にprice100などに変換する？となると、上限無しの時がうまく検索されない気がしておりまして・・。