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

Question

我想实现这样的目标：

从 X 元素中，我想选择“OK”的数量、“部分OK”的数量和“不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;
}

我做了一个小 Fiddle DEMO