带进度条类型填充的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>