如何自定义jquery滑块范围的颜色？

Question

使用jquery滑块时，我想将所选范围的默认颜色从灰色更改为蓝色。

$(document).ready(function() { 

      var slider = $('.slider').slider({ 
       range: "min", 
       min: 0, 
       max: 100, 
       change: function (e, ui) { 
        //     $("#img1").fadeOut(); 
        //     alert("done"); 
       }, 
       slide: function (e, ui) { 
        var point = ui.value; 
        $("#selected_value").html(point); 
        var width = 100 - point; 
        $("#range").css({ "width": point + "%" }); 
       } 

      }); 

我的html：

<div> 
     Min: <span id="selected_value">0</span><br /> 

    </div> 
    <div> 
     <div class="slider"><div id="range"></div></div> 
    </div> 

和我的CSS：

#range 
{ 
    position:absolute; 
    height:100%; 
    top: 0; 
    background-color:Blue; 
} 

Answer 1

你需要用CSS指定此：

div.ui-slider-range.ui-widget-header { 
    background: blue; 
} 

如果你只希望定位滑块的子集，相应地限制选择器。

See it in action。

Answer 2

看看这为解决方案

.ui-widget-header{background-image:none;background-color:#A157A4;} 
.ui-widget-content { background: #FFCCCC; } 

Answer 3

如果你有一个滑块范围使用这种在滑块功能更改UI

$("#slider-range .ui-slider-range").css({"background":"#ef2929"}); 

$("#slider-range .ui-slider-handle").css({"border-color":"#ef2929"});