javascript - 将 HTML5 范围 slider 最小值和最大值映射到数组值

Question

我正在为音乐教师制作一个 HTML5 表格，这样他们就可以更轻松地对他们的音乐库进行分类。请求的元素之一是双处理范围 slider ，它能够定义特定片段的范围。如果我们谈论的是 0 到 100，这一切都很好，但我们谈论的是 G-Flat 3 到 B5，这是一系列通常不会在范围 slider 上找到的任意值。

我想做的是创建一个包含从 G-Flat 3 到 B5(最低到最高)的所有不同音符范围的数组，然后以某种方式将它们映射到双处理范围 slider 。问题是，我不知道该怎么做，也不知道这是否可能。

本质上，我想创建一个数组:

Array = ['Gb3', 'G3', 'G#3', 'Ab3', 'A3',... 'A#5', 'Bb5', 'B5'];

以某种方式将它们与数值相匹配:

0 = 'Gb3';
1 = 'G3';
2 = 'G#3';

然后将它们映射到双 handle 范围 slider 。

有谁知道是否有一个库、插件或魔法毒菌可以为我指明正确的方向？

更新:我要感谢发帖的所有人。有这么多奇妙的答案，我很难选择“那个”答案。

Answer 1

我找到了 this polyfill对于 now-abandoned建议加个multiple属性为 <input type="range">规范它很简单并且运行良好，但有一个不幸的错误:当移动第二个句柄时不会触发事件处理程序。不过，这很容易变通:

const notes = ['Gb3', 'G3', 'G#3', 'Ab3', 'A3', /* ... */ 'A#5', 'Bb5', 'B5'];

function handleChange() {
  const { valueLow, valueHigh } = this;
  const lowNote = notes[parseInt(valueLow, 10)];
  const highNote = notes[parseInt(valueHigh, 10)];
  console.log('%s to %s', lowNote, highNote);
}

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input[type=range]');
  input.addEventListener('input', handleChange);
  input.nextElementSibling.addEventListener('input', handleChange.bind(input));
});

<script src="https://cdn.rawgit.com/LeaVerou/multirange/gh-pages/multirange.js"></script>
<link href="https://cdn.rawgit.com/LeaVerou/multirange/gh-pages/multirange.css" rel="stylesheet"/>

Change me: <input type="range" min="0" value="0,7" max="7" step="1" multiple>

如您所见，我设置了 <input>的 min属性为 0，max到 notes 中的最高指数( notes.length - 1 == 7 ), 和 value至 0,7 .除了添加 'input'事件处理程序到 input ，我已将相同的处理程序添加到 input.nextElementSibling .后者是生成的“幽灵”元素，它呈现第二个句柄。有必要将事件处理程序绑定(bind)到 input因为“幽灵”输入没有 valueLow和 valueHigh .