将HTML5范围的滑动条最小值和最大值映射到数组值

I am putting together an HTML5 form for music teachers so they can classify their music library a bit easier. One of the requested elements is a double handled range slider that would be able to define the range of a particular piece. This is all fine if we were talking 0 to 100, but we're talking G-Flat 3 to B5, a series of arbitrary values that wouldn't normally be found on a range slider.

我正在为音乐教师制作一个HTML5表单，这样他们就可以更容易地分类他们的音乐库。被请求的元素之一是一个双处理的范围滑块，它可以定义特定块的范围。如果我们讨论的是0到100，这是没问题的，但是我们讨论的是G-Flat 3到B5，一系列的任意值通常不会出现在range slider上。

What I'm thinking of doing is creating an array of all the different note ranges from G-Flat 3 to B5 (lowest to highest), and then somehow mapping those to a double handled range slider. Problem is, I don't know how to do that, nor do I know if it is even possible.

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

In essence, I would like to create an array:

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

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

Somehow match those up to numeric values:

以某种方式匹配数值:

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

And then map those to a double handle range slider.

然后将它们映射到双手柄范围滑块。

Any one know if there is a library, or plugin or magic toadstool that can point me in the right direction?

谁知道是否有一个图书馆，或插件或魔法的毒虫可以指引我正确的方向?

UPDATE: I want to thank EVERYONE who posted to this. There are so many fantastic answers, I'm having a very difficult time choosing "the" answer.

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

4 个解决方案

#1

I would use a javascript object. Here is an example.

我会使用一个javascript对象。这是一个例子。

HTML

<input type="range" value='0' min='0' max='3'>
<div class='sound'></div>

jQuery

var obj = {
  0 : 'Gb3',
  1 : 'G3',
  2 : 'G#3'
}

$('body').on('change', 'input[type=range]', function(){
  var val = $(this).val();
  $('.sound').text(obj[val])
});

#2

I found this polyfill for a now-abandoned proposal to add a multiple attribute to the <input type="range"> spec. It's simple and works well enough, but has an unfortunate bug: Event handlers aren't fired for when the second handle is moved. It's pretty easy to work around, though:

我发现这个polyfill用于一个现在已经被抛弃的建议，即向规范添加多个属性。它很简单，工作得很好，但是有一个不幸的错误:当第二个句柄被移动时，事件处理程序不会被触发。不过，在周围工作很容易:

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>

As you can see, I've set the <input>'s min attribute to 0, max to the highest index in notes (notes.length - 1 == 7), and value to 0,7. In addition to adding an 'input' event handler to input, I've added the same handler to input.nextElementSibling. The latter is the generated "ghost" element which renders the second handle. It's necessary to bind the event handler to input because the "ghost" input doesn't have valueLow and valueHigh.

如您所见，我将's min属性设置为0,max设置为notes中的最高索引(notes)。长度- 1 = 7)，值为0,7。除了向输入添加“input”事件处理程序之外，我还向inpuot . nextelementsibling添加了相同的处理程序。后者是生成第二个句柄的生成的“ghost”元素。必须将事件处理程序绑定到输入，因为“ghost”输入没有valueLow和valueHigh。

#3

Using jquery UI slider you can do something like this fiddle:

使用jquery UI滑动条，您可以做如下操作:

    $(function () {
    var note =  ['Gb3', 'G3', 'G#3', 'Ab3', 'A3', 'A#5', 'Bb5', 'B5'];
        $("#slider-range-min").slider({
            range: true,
            values: [0,7],
            min: 0,
            max: 7,          
            step: 1,
            slide: function (event, ui) {           
                $("#amount").val(note[ui.values[0]]+ "-"+note[ui.values[1]]);
            }
        });
        $("#amount").val(note[0]+ "-"+note[7]);

});

#4

A similar question was asked here. The solution offered is to use the jQuery UI Slider.

这里有一个类似的问题。提供的解决方案是使用jQuery UI滑块。

To answer the part of your question specific to your case, you will probably need to build the array of possible values (like you've done above: notesArr = ['Gb3', 'G3' ... 'Bb5', 'B5']; and in the ui-slider code, set the min to 0 and the max to notesArr.length - 1. In the portion of the code that defines the label, use the integer value of the slider position to index into the array to get the string value to display.

要回答特定于您案例的问题，您可能需要构建可能值的数组(就像您上面所做的:notesArr = ['Gb3'， 'G3'…)“Bb5系列”、“B5 ');在ui-slider代码中，将min设置为0，将max设置为notesArr。长度- 1。在定义标签的代码部分，使用滑块位置的整数值索引到数组中，以获得要显示的字符串值。

#1