Alter Jquery slider handle color after slide

Question

I am trying to change the background color of the Jquery slider handle as soon as it is moved or changed. I tried adding a class in the start event which worked. It added my class (with corresponding css to change the background color) but unfortunately no color changed. Fiddle: http://jsfiddle.net/cseitz/DrGYT/11/

.ui-slider .ui-slider-handle {
background: blue;
}
.updated-handle {
background: red;
}

$("#myslider").slider({
start: function (event, ui) {
    $("#myslider").slider().find(".ui-slider-handle").addClass("updated-handle");
}
});

<div id="myslider"></div>

Answer 1

You just have to be as specific (or more specific) than your other rule. .ui-slider .ui-slider-handle is more specific than .updated-handle so it was being ignored.

Just use:

.ui-slider .updated-handle {
    background: red;
}

jsFiddle example