rangesliderについて

Question

前提・実現したいこと

お世話になっております。
rangesliderを実装したいのですが、範囲指定で数値ではなく「A」～「F」のアルファベットを
選択できるようにしたいです。
色々と調査はしましたが、そのような方法が見当たらず、こちらでお力添えをいただけないかと思い
質問をさせていただきました。
search-filterというプラグインのjsを使用しています。

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

該当のソースコード

<li class="sf-field-post-meta" data-sf-field-name="_sfm" data-sf-field-type="post_meta" data-sf-field-input-type="range-slider" data-sf-meta-type="number"><h4>〇〇〇</h4>   <div  data-start-min="1" data-start-max="6" data-start-min-formatted="6" data-start-max-formatted="6" data-min="1" data-max="6" data-step="1" data-decimal-places="0" data-thousand-seperator="" data-decimal-seperator="." data-display-values-as="textinput" data-sf-field-name="_sfm" class="sf-meta-range sf-meta-range-slider">
    
          <label><input class="sf-input-range-number sf-range-min sf-input-number" min="1" max="6" step="1" name="_sfm[]" type="number" value="1" title=""></label>    <span class="sf-range-values-seperator"> - </span>    <label><input class="sf-input-range-number sf-range-max sf-input-number" min="1" max="6" step="1" name="_sfm[]" type="number" value="6" title=""></label>          
      <div class="meta-slider"></div>
    </div>
    </li>

試したこと

最小値最大値で数字になっているところを、「A」「F」に変更。
type="number"　⇒　type="url",type="text"へ変更

いずれもうまくいきませんでした。

♯♯♯ 追記
rangesliderとは、画像のような範囲が指定できるスライダーです。
この数字になっている部分を「ABCDEF」から選択できるようにしたいです。

Answer 1

範囲指定のUIの話とのことで、下の回答は的外れでした。

---

「rangeslide」というのが何を指すのかわからないのですが、何にしても<input type=number>や<input type=range>で数値意外の値をもたせることは不可能です。

どうしても現在のUIを使いたいのなら、それらの inputイベントを監視して数値に相当する A-F を <input type=hidden name=...> にセットしましょう。

また、選択肢が6個程度ならラジオボタンや<select>を使うほうが簡単かもしれません。

Comments

[mai24451]

回答ありがとうございます。
画像を追加させていただきました。
このような感じで、アルファベットを選択できるようにしたいのですが、技術的に難しいことになるのでしょうかね。。。

[int32_t]

あー、範囲指定のコントロールなのですね。この回答は的外れでしたね。
rangesliderというのが公開されているライブラリであれば、そのURLなどの情報が必要だと思います。

[mai24451]

スクリプトはこちらにあたるかと思います。
https://rangeslider.js.org/