我需要一个范围 slider 建议,并且可以自定义范围步骤。
例如,我的范围步骤应为:
a - b - c - d
关联值为 (0, 1, 2, 3)。我需要能够选择范围的最小值和最大值。
我用谷歌搜索了一些,但没有找到。
前两个范围 slider 是(至少在我看来):rangeslider和 nouislider但我不知道如何调整它们中的任何一个来满足我的需要。
我在我的应用程序中使用了 MaterializeCSS 和 jQuery,因此我更喜欢基于这些库的解决方案,但任何建议都会受到赞赏,因为在我看来,这不是一件容易的任务。
谢谢!
最佳答案
为什么不使用正常范围元素并将数字映射到字母?
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>
关于javascript - 具有自定义范围步骤的范围 slider (a - b- c- d - .. - z),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40775886/