Javascript 具有范围和三种不同背景颜色的jQuery滑块

我想实现这样的目标：

#YourDiv {
    float: right;
    height: 100%;
    background: red;
    width: 50px; /* this would be dynamic */
    border-radius: 0 4px 4px 0;
}

从X元素中，我想选择“OK”的数字、或“部分OK”的数字和“not OK”的数字。显然，这三个范围是不可叠加的，总和总是X

我试着从背景开始，但是主背景是独一无二的，因此我不能把绿色和红色放在一起

---

有没有插件已经做到了这一点？或者知道使用标准jQuery插件最简单的方法是什么？

jQuery UI滑块提供了它的值，您可以在演示中看到：

$( "#slider-range" ).slider({
  slide: function( event, ui ) {
    /* here, you can play with it */
  }
});

我将滑块的背景色设置为绿色，中间部分的背景色设置为黄色，并在滑块右侧添加一个动态调整宽度的

div

，使其从右向左倾斜

$( "#slider-range" ).slider({
  slide: function( event, ui ) {
    $('#YourDiv').css('width', ui.values[1]); /* obviously, you have to multiply the value of the slider by something to fit your design */
  }
});

在jQuery UI演示中，div的样式如下：

#YourDiv {
    float: right;
    height: 100%;
    background: red;
    width: 50px; /* this would be dynamic */
    border-radius: 0 4px 4px 0;
}

我拉了一把小小提琴