Question

I am extending JQuery UI slider by specifying a custom style for its handle.

The code is as follows:

JavaScript:

var slider = $("#container").slider();
var handle = $(".ui-slider-handle", slider);

Then I’m doing

handle.css("backgroundColor","yellow");

which works.

But when I create a class like:

.yellow
{
   background-color: yellow;
}

and use

  handle.addClass("yellow"); // works!

it doesn’t pick it up. Let me clarify one thing – the CSS location is valid and my custom CSS gets applied after the JQuery CSS, if I to override JQuery original styles in my custom CSS by writing:

.ui-slider-horizontal .ui-slider-handle 
{ 
   background-color: yellow;    
}

it works again. it’s just addClass what just doesn’t seem to honored. Could anyone advice on how to I get it working with addClass?

Answer 1

I think you have a problem with css specificity meaning that your class .yellow has less specificity that .ui-slider-horizontal .ui-slider-handle

One solution is to add specificity to yellow so it doesn’t get override like

.ui-slider-horizontal .ui-slider-handle.yellow {
background-color: yellow;
}