Jquery UI 滑块范围样式（左侧和右侧）

Question

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

更改滑块的背景颜色左右同时发生变化，但是我想要由范围最小/最大选择器创建的 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。