How to adjust jquery slider range color?

Question

When using the jquery slider, I would like to change the default color of the selected range from gray to blue.

$(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 + "%" }); } }); 

my html:

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

and my css:

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

Answer 1

You need to specify this using CSS:

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

If you want to target a subset of the sliders, limit it.

Look at the action .

Answer 2

SEE IT FOR SOLUTION

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

Answer 3

If you have a range of sliders, use this in the slider function to change the user interface.

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