カスタムレンジステップ（a - b - c - d - .. z）を持つレンジスライダ

Question

レンジステップをカスタマイズすることができるレンジスライダ推奨が必要です。 （0、1、2、3）の関連値と

a - b - c - d 

：

例えば私の範囲ステップは、としてであるべきです。私は範囲の最小値と最大値を選択できる必要があります。

私はグーグルをしましたが、何も見つかりませんでした。

トップの2つのレンジスライダは（少なくとも私のように）rangesliderとnouisliderですが、私が必要とするものを調整する方法はわかりません。

私はmaterializecssとjQueryを私のアプリケーションに使用していますので、これらのライブラリに基づいてソリューションを選ぶことをお勧めしますが、これは簡単な作業ではないようです。

ありがとうございます！

Answer 1

通常の範囲の要素を使用して数字を文字にマップしてみませんか？

var rng = document.getElementById("rng"); 
 
var ro = document.getElementById("rngOutput"); 
 
var myRange = ["a","b","c","d"]; 
 

 
function updateRange(){ 
 
    ro.textContent = myRange[parseInt(rng.value, 10)]; 
 
    console.log("Selected value is: " + myRange[parseInt(rng.value, 10)] + ", Associated value is: " + rng.value); 
 
}; 
 

 
window.addEventListener("DOMContentLoaded", updateRange); 
 
rng.addEventListener("input", updateRange);

<input type="range" id="rng" min="0" max="3" value="0"><span id="rngOutput"></span>