javascript - 具有范围和三种不同背景颜色的 jQuery slider

Question

我想实现这样的目标:

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

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

有没有插件可以做到这一点？或者有什么想法是使用标准 jQuery 插件最简单的方法吗？

Answer 1

jQuery UI slider 为您提供它的值，如您在演示中所见:

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

我将 slider 的背景颜色设置为绿色，中间部分的背景颜色设置为黄色，并添加一个 div 定位在 slider 的右侧，动态调整宽度，以便它能拉伸(stretch)从右到左

$( "#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;
}

我做了一个 fiddle DEMO