javascript - 带有 JS 的 jQuery 移动 slider

Question

这是一个 JSFiddle:

https://jsfiddle.net/vm1jqakx/8/

HTML:

<form>
           <label for="text-1" class="contrastText">Adjust the slider to display a word in text box from JS steps array:</label>
           <input type="text" disabled="disabled" name="text-1" id="text-1" value="">
    </form>

    <form>
        <label for="slider-1"></label>
        <input type="range" name="slider-1" id="slider-1" min="0" max="4" value="0" step="1" data-popup-enabled="true">
    </form>

JS:

$(function() {

    var steps = [
        "Last",
        "dance",
        "with",
        "mary",
        "jane"
    ];

    $("input#slider-1").on("change", function (event) {
        var value = $(this).val();
        //alert(steps[value]);
    });

});

我如何才能根据 slider 0-4 的值，在输入文本框中显示“steps”数组中该索引处的单词。例如， slider 值为 3 会在输入文本框中显示单词“mary”。

Answer 1

要设置输入元素的值，请使用:

$("#text-1").val(steps[value]);

JSFiddle:https://jsfiddle.net/vm1jqakx/9/