编程语言
首页 > 编程语言> > javascript – jQuery-UI滑块背景

javascript – jQuery-UI滑块背景

作者:互联网

是否可以设置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>在滑块内部,将其左右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

标签:jquery-ui-slider,javascript,jquery,css,jquery-ui
来源: https://codeday.me/bug/20190831/1778520.html