Question

Jquery UI滑块允许访问类ui-slider-range以在所选范围上执行自定义css。有没有一种简单的方法可以将自定义css（在我的情况下为背景颜色）添加到所选范围的左右两侧？

更改滑块背景颜色左右都会发生变化，但我希望三个效果基本上由3个单独的背景颜色组成，用于由范围最小/最大选择器创建的3个分割区域;

Answer 1

您可以使用jQuery向background-image添加.ui-slider样式属性。您必须以百分比计算滑块的位置。

例如，查看CSS

.ui-slider {
    background-image: -webkit-linear-gradient(left, red 50%, blue 50%);
}

只要用户移动滑块，您的jQuery就会更新该特定滑块的样式。看看这个jsFiddle。

var myMin = 0, myMax = 500;
$("#slider-range").slider({
    range: true,
    min: myMin,
    max: myMax,
    values: [75, 300],
    slide: function (event, ui) {
        // Update amount text
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

        // Update left/right color
        var left = 100 * (ui.values[0] - myMin) / (myMax - myMin);
        var right = 100 * (ui.values[1] - myMin) / (myMax - myMin);
        $(this).css('background-image', '-webkit-linear-gradient(left, red ' + left + '%, blue ' + right + '%)');
    }
});

注意，您必须找到一种初始为左/右侧着色的方法。此外，还有一些特定于浏览器的background-image属性，请参阅this answer。

Jquery UI Slider范围造型（左侧和右侧）

1 个答案: