我一直在寻找一个关于如何做到这一点的答案,我似乎无法弄清楚(甚至看着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 <span id="curr-tasks_time" class="calc_number">1</span> hours
<div id="tasks_time">
</div>
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;}
这里的an example
预先感谢您的帮助!
好极了,谢谢!只需添加“range:'min'”和“min:”的值就可以了! – David 2012-01-04 16:00:40
@Aram Mkrtchyan - 这是否工作? – 2013-03-13 15:07:28
@RyanSammut是的,它的工作原理是一个例子 http:// jsfiddle。net/amkrtchyan/EAaLK/2/ – 2013-03-15 08:00:17