具有自定义范围步骤的范围滑块（a - b- c- d - .. - z）答案

【问题标题】：range slider with custom range steps ( a - b- c- d - .. - z)具有自定义范围步骤的范围滑块（a - b- c- d - .. - z）
【发布时间】：2016-11-23 23:34:34
【问题描述】：

我需要一个可以自定义范围步骤的范围滑块推荐。

例如我的范围步骤应该是：

a - b - c - d

关联值为 (0, 1, 2, 3)。我需要能够选择范围的最小值和最大值。

我做了一些谷歌搜索，但没有找到。

前两个范围滑块是（至少在我看来）：rangeslider 和 nouislider，但我不知道如何调整它们中的任何一个来满足我的需要。

我在我的应用程序中使用 materializecss 和 jQuery，因此我更喜欢基于这些库的解决方案，但任何建议都值得赞赏，因为在我看来这不是一件容易的事。

谢谢！

【问题讨论】：

为什么不使用正常的范围元素并将数字映射到字母？
嗯，你能给我举个例子吗。我可能在这里错过了一些基本的东西。另外，我在这里需要最小值和最大值。将更新我的问题。
在下面查看我的答案以获取工作示例。
我相信代码的行为会因浏览器而异。
这似乎将是一项有趣的任务......我希望这样的事情已经存在，猜不出来。当我找到解决方案时，我会发布我的解决方案，希望很快。

标签： javascript jquery html materialize rangeslider

【解决方案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);

&lt;input type="range" id="rng" min="0" max="3" value="0"&gt;&lt;span id="rngOutput"&gt;&lt;/span&gt;

【讨论】：

这是有道理的（至少在第一眼看来，我的 js 不是很好）但是我如何将它与上限和下限一起使用？
可以在 HTML 中设置上下数值。包含字母的数组可以声明一次，包含您可能想要的所有字母。