Question

I’m using this slider:
http://docs.jquery.com/UI/Slider

I need to change the colors of slider handle & slider bar. Since I’m new to jQuery, I’m not able to figure out how to do it. Can anybody help?

Answer 1

Actually, I ran into the same problem and this is how I’ve solved it:

My html markup was this:

<div id="slider" class="hidden">
    <input type="text" id="sliderAmount" value="30% to 90%" readonly="readonly"/>               
</div>

I manually added the class to the handle bar with jQuery like this:

$(document).ready(function(){
    $("#slider a").addClass("myClassForSliderHandle");
});

which, when you look at the code (inspect element in chrome) looks like this (because the jQueryUI turns the handle bar into the a tag):

<a class="ui-slider-handle ui-state-default ui-corner-all myClassForSliderHandle" href="#"></a>

and I added this in my css file:

.myClassForSliderHandle {
    background-color: yellow !important;
    background-image: none !important;
}

and this is the result I got:

Originaly, I was using theme blitzer which as you can see on this link doesn’t have the yellow handlebars.

edit: how to change the slider color:
If you look at the class (I use inspect element in Chrome browser) which is applied to the slider you see this:

.ui-widget-header {
    border: 1px solid #E3A1A1;
    background: #C00 url(images/ui-bg_highlight-soft_15_cc0000_1x100.png) 50% 50%         repeat-x;
    color: white;
    font-weight: bold;
}

Now, in order to change the color of the slider you have to remove the background image, just try it like this (I tried and it works):

.ui-widget-header {
    border: 1px solid #E3A1A1;
    background: green;
    color: white;
    font-weight: bold;
}

This class is located in the jQuery UI css file (in my case jquery-ui-1.8.16.custom.css).

Hope this now resolves your problem.