HTML5の範囲のスライダーを最小値と最大値にマッピングする

Question

私は音楽教師用のHTML5フォームをまとめているので、音楽ライブラリを少し簡単に分類できます。要求された要素の1つは、特定のピースの範囲を定義できるダブルハンドリング範囲スライダです。 0から100まで話していても問題ありませんが、通常は範囲スライダでは検出されない一連の任意の値であるG-Flat 3からB5を話しています。

私が考えているのは、G-Flat 3からB5（最低から最高まで）のさまざまな音域の配列を作成し、それらを何らかの形で2重処理範囲スライダにマッピングすることです。問題は、どうやってそれをするのか分からず、それが可能なのかどうかも分かりません。本質的には

、私は配列を作成したいと思います：

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

をそしてダブルハンドルの範囲スライダにそれらをマップ：

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

はどういうわけか、数値にそれらを一致させます。

正しい方向に私を指すことができるライブラリやプラグインや魔法のtoadstoolがあるかどうかは知っていますか？

更新日：私はこれに投稿したすべての人に感謝したいと思います。非常に多くの素晴らしい答えがありますが、私は答えを選ぶのがとても難しいです。

Answer 1

私は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]) 
}); 

Answer 2

同様の質問がhereを頼まれました。提供される解決策は、jQuery UI Sliderを使用することです。

あなたの質問に固有の部分に答えるには、可能な値の配列を作成する必要があります（上で行ったように：notesArr = ['Gb3', 'G3' ... 'Bb5', 'B5'];、ui-sliderコードでminを0に設定します）。 max〜notesArr.length - 1。ラベルを定義するコードの部分では、スライダの位置の整数値を使用して、配列にインデックスを付けて文字列値を表示します。

Answer 3

jquery UIスライダを使用すると、このfiddle：

$(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]); 

}); 

Answer 4

I fou this polyfillのnow-abandonedの提案multiple属性を<input type="range">の仕様に追加することを提案しています。シンプルで十分ですが、残念なことにバグがあります。イベントハンドラは、2番目のハンドルを移動したときに起動されません。これは、しかし、回避するには非常に簡単です：

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、notesで最高のインデックスへmax（notes.length - 1 == 7） 、およびvalue~0,7である。 'input'イベントハンドラをinputに追加することに加えて、同じハンドラをinput.nextElementSiblingに追加しました。後者は、生成された "ゴースト"要素で、2番目のハンドルをレンダリングします。 「ゴースト」入力にはvalueLowとvalueHighがないため、イベントハンドラをinputにバインドする必要があります。