Изменение цвета слайдера jquery ui при перемещении по нему

Я искал ответ, как это сделать, и не могу понять его (даже глядя на jquery ui документация по тематике). Когда я перемещаю ползунок слева направо, я хочу, чтобы область с левой стороны ручки ползунка изменилась на оранжевый (вместо серого по умолчанию).

Тематический ролик jquery сгенерировал CSS ниже. Предположительно цвет фона .ui-widget-header будет контролировать это, но, похоже, это не так. Также не добавляется цвет фона к какому-либо другому классу. Есть идеи, как это исправить, чтобы при перемещении по горизонтали вы получали другой цвет?

JQUERY:

    $(document).ready(function(){

        $("#tasks_time").slider({
            value: 1,
            min: 0,
            max: 72,
            step: 1,
            slide: function() {
                update();
            }
        });

        $("#tasks_done").slider({
            value: 5,
            min: 0,
            max: 1000,
            step: 10,
            slide: function() {
                update();
            }
        });

HTML:

    Finish these items in 1 hours

    

CSS:

.ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%;  }
.ui-slider-horizontal .ui-slider-range-min { left: 0;  }
.ui-slider-horizontal .ui-slider-range-max { right: 0;}

Вот пример

Заранее спасибо за ваш помощь!

6
задан David 4 January 2012 в 07:52
поделиться