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

Question

我想要实现这样的目标：

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

我试图从standard jQuery UI slider开始，但主要背景是独一无二的，因此我不能将绿色和红色结合在一起。

有没有插件已经这样做了？或者对标准jQuery插件最简单的方法有什么想法？

Answer 1

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;
}

我做了一个小小提琴 DEMO