html 怎么改变视频slider的颜色,css – 滑动时更改jquery ui滑块的颜色

我一直在寻找关于如何做到这一点的答案,我似乎无法弄明白(甚至看看

jquery ui主题文档).当我从左向右移动滑块时,我希望滑块旋钮左侧的部分变为橙色(而不是默认的灰色).

jquery theme-roll生成了下面的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;}

在此先感谢您的帮助！