Rangeslider highlight background not working good in JQuery Mobile

Question

I'm using a rangeslider with JQuery Mobile 1.4.2 and I want change the highlight background, but I can not make it work correctly.

I've created my themes via Theme Roller, I have two: theme A (image left) and theme B (image right). I want that my rangeslider be like theme B.

I've tried writting the data-track-theme in the rangeslider but the highlight background disappear:

<div data-role="rangeslider" data-mini="true" data-track-theme="b">
    <label for="range-1a">Rango de números a utilizar (1-100)</label>
    <input type="range" min="1" max="100" value="1" >
    <input type="range" min="1" max="100" value="30">
</div>

And looks like this:

I've tried to change the highlight background with CSS too:

.ui-slider-track{
  background: #FFCC99!important;
}
.ui-slider .ui-btn-active{
  background: #FF8000!important;
}
.ui-rangeslider .ui-btn-active{
  background: #FF8000!important;
}

And everything seem works good, but when I move the left control the highlight background disappear and when I move the right control the highlight background appears again.

Any idea how solve it? Thanks!

Answer 1

Even when the @ezanker answer looks good, for some reason doesn't work for me, and the problem when move the left control still. Maybe was a conflict with the JQuery Mobile themes created.

I could solved it putting the data-track-theme="b"in the rangesliders and deleting the first rule in CSS that I had (ui-slider-track). My CSS looks like this:

.ui-slider .ui-btn-active{
    background: #FF8000!important;
}

.ui-rangeslider .ui-btn-active{
    background: #FF8000!important;
}