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

【问题标题】：jQuery slider bar with progress bar-type fill带有进度条类型填充的 jQuery 滑块
【发布时间】：2010-11-06 07:45:36
【问题描述】：

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

提前谢谢你。

【问题讨论】：

【解决方案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>

【讨论】：

这是对滑块功能的补充还是替代？
@Rio，我已经更新了我的答案。这个使用滑块（）函数。我之前的版本是用来替换slider()的，但是上面的解决方案应该会更好。