2016-07-31 60 views
1

我瀏覽了Foundation 6的文檔並找不到解決方案。基礎6範圍滑塊 - 當用戶放開手柄時更新輸入值

我有一個輸入字段綁定到範圍滑塊,並希望調用一個函數,用於格式化輸入值,一旦用戶放開句柄(我必須這樣做,因爲滑塊無法用逗號處理值和點,如1,200.87)。

我認爲moved.zf.slider事件將是理想的是,該文件說,它激發當手柄做運動,但它只要把手被感動,我會觸發多次當它用戶放開鼠標按鈕/停止觸摸屏幕時,它只會觸發一次。

可以這樣做嗎?每個手柄完成移動(例如搶購增量之間),所以你想要的是基於一個範圍的輸入交互之後的停頓時間的函數

回答

1

moved.zf.slider火災,這是changed.zf.slider結合data-changed-delay

所以你的HTML會是這樣的:

<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true" data-changed-delay="2000"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span> 
    <span class="slider-fill" data-slider-fill></span> 
    <input id="result" type="hidden"> 
    </div> 

哪裏data-changed-delay="2000"是要等待決定他們完成之前以毫秒爲單位的時間(2秒可能是相當長的,但它可以更容易看到它的工作)。當然你也可以通過jQuery來做到這一點。注:如果沒有明確設置,默認值爲500毫秒,這是對暫停時間的很好估計。

那麼你jQuery是這樣的:

$('.slider').on('changed.zf.slider', function() { 
    //do whatever when user is done with the range slider 
}); 

這樣做只是等待觸發(changed.zf.slider),然後運行包圍的腳本。

我穿上JSFiddle

Reference in Foundation docs

爲例