javascript - 具有自定义范围步骤的范围 slider (a - b- c- d - .. - z)

标签 javascript jquery html materialize rangeslider

我需要一个范围 slider 建议,并且可以自定义范围步骤。

例如,我的范围步骤应为:

a - b - c - d

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

我用谷歌搜索了一些,但没有找到。

前两个范围 slider 是(至少在我看来):rangeslidernouislider但我不知道如何调整它们中的任何一个来满足我的需要。

我在我的应用程序中使用了 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/

相关文章:

javascript - WinJS 内联绑定(bind)语法

javascript - Kendo UI 网格和自定义弹出删除确认

javascript - 用 jquery 替换 html 按钮

jquery - 检查表格是否有错误;但现在表单无法提交

html - 达到最小宽度时防止 css 中的列表溢出

javascript - 如何使用 jquery 获取 ckeditor textarea 值?

javascript - JS更改导入的初始化参数后

javascript - 重叠 2 个 div 边框

javascript - 如何防止我的堆叠系列顺序颠倒?

javascript - Bootstrap Accordion + x-editable