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

具有固定最小值的JQuery滑块

1 个答案: