帶進度條類型填充的jQuery滑動條

Question

我正在尋找實現jQuery UI，以便滑動條用一種顏色填充條的一側，如同沿着拖動該句柄一樣，有點像進度條。任何人都可以給我提示我如何解決這個問題？

預先感謝您。

Answer 1

我可能應該更仔細地看看slider() documentation。這是一個更簡單的方式來做我認爲你正在尋找的東西。它已經內置到jQuery UI中。下面的示例直接從我鏈接到上面的jQuery slider()文檔頁面中獲取。關鍵是傳遞給選項的range屬性。給出這個值「min」將導致滑塊向左側填充顏色。

中的JavaScript：

$(function() { 
    $("#slider-range-min").slider({ 
     range: "min", 
     value: 37, 
     min: 1, 
     max: 700, 
     slide: function(event, ui) { 
      $("#amount").val('$' + ui.value); 
     } 
    }); 
    $("#amount").val('$' + $("#slider-range-min").slider("value")); 
}); 

的標記：

<div id="slider-range-min"></div>