Foundation 6.2用js設置滑塊的值

我想用javascript設置Slider的值，但我不知道該怎麼做。我試圖修改隱藏輸入的值，但滑塊手柄不移動。Foundation 6.2用js設置滑塊的值

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

請幫助。謝謝。

來源

2016-03-31 Michal

是否要通過javascript或通過某些操作設置頁面加載的值，例如點擊？ – Yass

我想在焦點事件觸發時設置值。 – Michal

嗨，當您移動滑塊手柄新值設置到隱藏的輸入。但改變隱藏輸入的值將不會移動滑塊。

所以，你可以這樣做：

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

來源

2016-03-31 19:59:55 Jimmy

它的工作原理。謝謝！但是，這似乎不是非常優雅的解決方案。 :) – Michal

http://foundation.zurb.com/sites/docs/javascript.html#configuring-plugins – Jimmy

你必須從隱藏更改輸入的類型，並添加ARIA的控件=「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";

來源

2016-11-15 12:10:49

Foundation 6.2用js設置滑塊的值

回答

相關問題