JQuery UI滑块范围样式（左，右）

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。