具有固定最小值的 JQuery 滑块

Question

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

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

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

[===|_____] 第一次

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

我尝试使用范围滑块来制作它，隐藏第一个处理程序，但我遇到了颜色问题。我所做的只是为整个背景添加颜色，这不是我的目标。

Answer 1

为每个处理程序创建一个带有背景颜色的 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();
});

见jsFilddler here