带有进度条型填充的 jQuery slider

Question

我希望实现 jQuery UI，以便当您拖动 handle 时， slider 会用一种颜色填充 slider 的一侧，有点像进度条。谁能给我一些关于如何解决这个问题的提示？

提前谢谢您。

Answer 1

我可能应该看看 slider() documentation接近一点了。这是一种更简单的方法来完成我认为您正在寻找的事情。它已经内置到 jQuery UI 中。下面的示例直接取 self 上面链接的 jQuery slider() 文档页面。关键是传递到选项中的 range 属性。为其指定值“min”将导致 slider 用颜色填充左侧。

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>