jQuery-UI 滑块背景

Question

是否可以设置 jQuery-UI Slider 小部件的背景颜色（通过 JavaScript）？

这是正常的：

我希望达到的目标如下：

绿色范围将根据历史数据计算。我想向用户说明什么是“健康”范围。

提前感谢您的任何指点。

Answer 1

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