带有进度条型填充的jQuery滑块

时间:2009-06-27 02:24:52

标签: jquery jquery-ui slider

我正在寻求实现jQuery UI,以便滑动条在拖动手柄时用颜色填充栏的一侧,有点像进度条。谁能给我提示我如何处理这个问题?

提前谢谢。

1 个答案:

答案 0 :(得分:7)

我可能应该更仔细地研究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>