Question

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

例如，我的范围步骤应为：

a - b - c - d

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

我做了一些谷歌搜索，但找不到任何。

最重要的两个范围滑块（至少在我看来）：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>

自定义范围步长的范围滑块（a - b- c- d - .. - z）

1 个答案: