是否可以设置 jQuery-UI Slider 小部件的背景颜色(通过 JavaScript)?
这个是正常的:
我希望实现的目标如下:
绿色范围将根据历史数据计算。我想向用户说明什么是“健康”范围。
在此先感谢您的任何指点。
是否可以设置 jQuery-UI Slider 小部件的背景颜色(通过 JavaScript)?
这个是正常的:
我希望实现的目标如下:
绿色范围将根据历史数据计算。我想向用户说明什么是“健康”范围。
在此先感谢您的任何指点。
jQuery UI 不提供这样的功能,但实现起来并不难。
$.fn.addRange = function (min, max) {
this.prepend('<div class=range></div>');
$range = this.find('.range');
$range.css("left", min * 100 + '%');
$range.css("right", 100 - (max * 100) + '%');
};
var $slider = $('#slider');
$slider.slider();
$slider.addRange(0.2, 0.4);
这会<div class=range></div>
在滑块内部添加一个并将其left
和right
CSS 属性设置为 20% 和 40%。
以及随附的 CSS:
#slider {
background-color: red;
background-image: none;
}
.range {
position: absolute;
top: 0;
bottom: 0;
background-color: green;
}
结果:
演示:http: //jsbin.com/eheden/1/edit