Javascript 具有固定最小值的JQuery滑块

我正在尝试制作一个滑块，其中：

• 最小/最大值为0/100%（我可以做到）
• 它有一个固定的第一个值，不能更改，并用颜色填充（例如30%）
• 它有一个处理程序来完成之前的值（例如：从30%到100%），并将填充另一种颜色

这就是它应该看起来的样子是固定的第一个值，'-'是我们添加的，'.'是剩下的：

第一次

[==----||当我们移动处理程序时

---

我试着用一个范围滑块，隐藏了第一个处理程序，但是我在颜色方面遇到了问题。我所做的只是为整个背景添加一种颜色，这不是我的目标。

为每个处理程序创建一个带有背景颜色的div，并将它们附加到滑块

$(document).ready(function () {
var minFixedValue = 10;
var maxValue = 30;
var updateEvent = function (event, ui) {

    if (ui != undefined) {
        var index = $(ui.handle).index();
        if (index === 1) return false;
    }

    $('#slide1 .slide-back').remove();
    var backgrouldColorSettings = ['blue', 'grey']
    $($('#slide1 a').get().reverse()).each(function (i) {
        $('#slide1').append(
        $('<div></div>').addClass('slide-back')
            .width($(this).offset().left - 5)
            .css('background', backgrouldColorSettings[i]));
    });
};
$('#slide1').slider({
    range: true,
    slide: updateEvent,
    change: updateEvent,
    values: [minFixedValue, maxValue]
});

updateEvent();
});

$（文档）.ready（函数（）{
var minFixedValue=10；
var maxValue=30；
var updateEvent=函数（事件，ui）{
if（ui！=未定义）{
var index=$（ui.handle.index（）；
if（index==1）返回false；
}
$（'#slide1.slide back'）.remove（）；
var backgroundColorSettings=['蓝色'，'灰色']
$（$（'#slide1 a'）.get（）.reverse（））.each（函数（i）{
$（'#slide1'）。追加(
$（''）.addClass（'slide-back'）
.width（$（this）.offset（）.left-5）
.css（'background'，backgroundcolorsettings[i]）；
});
};
$（'#slide1'）。滑块({
范围：对，
幻灯片：updateEvent，
更改：updateEvent，
值：[minFixedValue，maxValue]
});
updateEvent（）；
});

---

请参见

Hi，在您的示例中，第一个手柄可以在不应该移动时移动。另外，第二个处理程序可以先于第一个处理程序，这也不应该发生。谢谢！这看起来太棒了，我要玩一玩来完全理解你做了什么。