Javascript Jquery UI滑块范围样式（左、右）

Jquery UI slider提供对类

UI slider range

的访问，以便在所选范围内执行自定义css。有没有一种简单的方法可以将自定义css（在我的例子中是背景色）添加到所选范围的左侧和右侧

---

改变滑块的背景颜色会改变左右，但是我想要一个三重效果，基本上是由最小/最大范围选择器创建的3个分割区域的3个独立背景颜色

您可以使用jQuery将

背景图像

样式属性添加到

.ui滑块

。您必须以百分比的形式计算滑块的位置

例如，查看CSS

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

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

---

请注意，您必须找到一种方法来对左侧/右侧进行初始着色。此外，还有一些特定于浏览器的

背景图像

属性，请参阅。

我想补充的是，应该有更好的方法从

幻灯片

事件处理程序中捕获最小/最大值。我没有在

ui

对象下看到它们，尽管滑块对象应该知道。在我看来，使用范围限定的

myMin/myMax

似乎有点“黑客味”）

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 + '%)');
    }
});