Question

我正在为音乐教师整理HTML5表单，以便他们可以更轻松地对音乐库进行分类。其中一个请求的元素是双处理范围滑块，可以定义特定部分的范围。如果我们谈论0到100，这一切都很好，但我们正在谈论G-Flat 3到B5，这是一系列通常在范围滑块上找不到的任意值。

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

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

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

以某种方式匹配数字值：

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

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

任何人都知道是否有可以指向正确方向的图书馆，插件或魔法毒菌？

更新：我要感谢所有发帖的人。有很多很棒的答案，我很难选择“答案”。

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

我找到this polyfill now-abandoned提案，要求multiple规范中添加<input type="range">属性。它很简单并且工作得很好，但是有一个不幸的错误：当移动第二个句柄时，事件处理程序没有被触发。但是，这很容易解决：

＆＃13;

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));
});

＆＃13;

<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>

＆＃13;

如您所见，我已将<input>的{{1}}属性设为0，min为max中的最高索引（ notes）和notes.length - 1 == 7至value。除了向0,7添加'input'事件处理程序之外，我还向input添加了相同的处理程序。后者是生成的幽灵＆＃34;呈现第二个句柄的元素。将事件处理程序绑定到input.nextElementSibling是必要的，因为＆＃34; ghost＆＃34;输入没有input和valueLow。

Answer 3

提出了类似的问题here。提供的解决方案是使用jQuery UI Slider。

要回答特定于您的案例的问题部分，您可能需要构建可能值的数组（如上所述：notesArr = ['Gb3', 'G3' ... 'Bb5', 'B5'];并在ui-slider代码中设置{ {1}}为0，min为max。在定义标签的代码部分中，使用滑块位置的整数值索引到数组中以获取字符串值显示。

Answer 4

使用jquery UI滑块，您可以执行类似fiddle的操作：

hdfs dfs -ls -R /user/hive/warehouse/t;
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2012
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2012/month=03
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2012/month=03/174c30c4e1edc236-b57504ce4afd76a2_1891304442_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2012/month=12
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2012/month=12/174c30c4e1edc236-b57504ce4afd76a2_798564417_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2013
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2013/month=09
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2013/month=09/174c30c4e1edc236-b57504ce4afd76a2_432428758_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2015
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2015/month=02
-rw-r--r--   1 impala supergroup          5 2017-02-07 13:45 /user/hive/warehouse/t/year=2015/month=02/174c30c4e1edc236-b57504ce4afd76a2_768620898_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2015/month=07
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2015/month=07/174c30c4e1edc236-b57504ce4afd76a2_2029099237_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2015/month=11
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2015/month=11/174c30c4e1edc236-b57504ce4afd76a2_974618320_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2016
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2016/month=02
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2016/month=02/174c30c4e1edc236-b57504ce4afd76a2_502842645_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2017
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2017/month=01
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2017/month=01/174c30c4e1edc236-b57504ce4afd76a2_2014291428_data.0.
drwxr-xr-x   - impala supergroup          0 2017-02-07 13:45 /user/hive/warehouse/t/year=2017/month=12
-rw-r--r--   1 impala supergroup          2 2017-02-07 13:45 /user/hive/warehouse/t/year=2017/month=12/174c30c4e1edc236-b57504ce4afd76a2_1693475255_data.0.

将HTML5范围滑块min和max映射到数组值

4 个答案: