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

Question

我想要实现这样的事情:

从X元素中,我想选择"OK"的数字,数字或"部分正常"以及"不正常"的数量.显然,三个范围不是可叠加的,并且总和总是X.

我试图从标准的jQuery UI滑块开始,但主背景是独特的,因此我不能将绿色和红色一起使用.

有没有插件已经这样做了？或者对标准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;
}

我做了一个小小的小提琴演示