jQuery的滑块与范围和不同的背景色

Question

我已经试过这个基本的jQuery范围滑块

<script> 
$(function() { 
$("#slider").slider(); 
}); 
</script> 

HTML

<div id='slider'></div> 

如何自定义范围，以显示不同的背景颜色和工具提示

Answer 1

$("#slider").css("background","red"); 
$(".ui-slider-range-min").css("background","yellow"); 

Answer 2

$(function() { 
 
    $("#slider-range-min").slider({ 
 
     range: "true", 
 
     value: 37, 
 
     min: 150, 
 
     step:150, 
 
     max: 7000, 
 
     
 
     slide: function(event, ui) { 
 
     $("#amount").val("$" + ui.value); 
 
     } 
 
    }); 
 
    $("#amount").val("$" + $("#slider-range-min").slider("value")); 
 
    }); 
 
//You can set multipel values as 
 
//values: [ 150, 250,1000,3000, 5000, 7000 ],

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
<p> 
 
    <label for="amount">Maximum price:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
    
 
<div id="slider-range-min"></div>