基礎6.2 jsでのスライダ設定値

Question

JavaScriptを使ってSliderの値を設定したいと思いますが、どのようにしたらよいか分かりません。隠し入力の値を変更しようとしましたが、スライダハンドルが動かない。

私のHTML：

<div class="slider" data-slider data-initial-start="50" data-step="5"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" ></span> 
    <span class="slider-fill" data-slider-fill></span> 
    <input type="hidden"> 
    </div> 

してください、助けて。ありがとう。

Answer 1

こんにちは、スライダハンドルを移動すると、新しい値が隠れた入力に設定されます。 しかし、非表示入力の値を変更してもスライダは移動しません。

だから、あなたがこれを行うことができます：

var pos = 5; mySlider = new Foundation.Slider($("#my_slider"), {initialStart: pos});

Answer 2

をあなたは隠されてからの入力の種類を変更し、アリア・コントロールを追加する必要があります=スライダーハンドルと「ID」と「idが」のIDです入力 - 入力はその後、今あなただけのJavaScript

<div class="slider" data-slider data-initial-start="50" data-step="5"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="myInputId" ></span> 
    <span class="slider-fill" data-slider-fill></span> 
    <input type="number" id="myInputId"> 
</div> 


document.getElementById("myInputId").value = "99";