html - 値の配列としてのhtml入力範囲ステップ

Question

私はinput type=range初めてで遊んでいますが、理想的にはステップ値を値の配列に設定したいと思います。仕様を調べたところ、データリストの可能性がわかりましたが、データリストは、いわば範囲内のハイライト値にのみ使用され、範囲内の値は設定されていません。

したがって、このようなもの（理想的にはjQueryプラグインなどなし）：

<input type="range" min="1" max="100" value="0" step="1,3,5,10,20">

Answer 1

これを実現するには、値を配列に格納し、スライダーを配列のインデクサーとして使用します。この例では、スライドしながら1、3、5、10、20、50、100をステップスルーします。

HTML

<input id="input" type="range" min="0" value="0" max="6" step="1">
<div id="output"></div>

JS

var values = [1,3,5,10,20,50,100];    //values to step to

var input = document.getElementById('input'),
   output = document.getElementById('output');

input.oninput = function(){
    output.innerHTML = values[this.value];
};
input.oninput(); //set default value

フィドル： http： //jsfiddle.net/26xk026z/1/

Answer 2

Karmaconの答えは問題なく機能しますaria-valuetextが、入力要素に属性を追加することを忘れないでください。スクリーンリーダーが正しい値を読み上げるのに役立ちます。

MDNは良い例を提供します： https ：//developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role#Example_2_Text_Values

Answer 3

次の入力がある：

    <input id="currentTimeInput" type="range" value="1" min="0" max="60" oninput="toggleSteps(this);" list=mapsettings>
    <datalist id=mapsettings>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>60</option>
    </datalist>

これが、ステップを1（0-10）と10（10-60）ずつ変更する私の関数です。

function toggleSteps(element) {
    var minutes = parseInt(element.value);
    if (minutes > 10) {
        element.step = 10;
    } else {
        element.step = 1;
    }
}

Answer 4

W3C仕様によれば、stepの値は「任意」または正の浮動小数点数にすることができます。それでおしまい。

step属性を指定する場合は、ゼロより大きい数値に解析される有効な浮動小数点数の値か、文字列「any」と大文字と小文字を区別しないASCII一致の値を指定する必要があります。 。