jQuery slider - 设置背景颜色以显示所需的范围

Question

我正在设置一个 Filament Group jQuery UI slider 并在成绩册中使用它。

我们需要允许教师设置所需的背景范围(以显示给定成绩的所需值与实际值)。我希望设置一个阴影区域(如 this picture 所示)，向查看 slider 的人们表明哪些值是理想的。如果 handle 在所需范围内，则该值令人满意。如果 handle 超出背景阴影范围，则可能需要进行一些更改。

关于如何实现这一目标有什么建议吗？根据我使用 Firebug 进行的实验，它看起来像 <div class="ui-slider">已设置，但其中的值似乎不允许设置背景颜色(只有 div 允许这样做)。

感谢您的帮助。

Answer 1

据我了解，您正在使用灯丝组插件来设置阴影区域的显示位置，因此它不是显示该区域的实际问题的一部分。因此，我的解决方案只关注纯 jQuery slider 。

正如您所说，我将使用一个 div(此处称为“slider-shaded”)来制作 slider ，然后在其中放入另一个 div 来标记该区域。这与 jQuery 的做法很接近(将 div 放置在 slider div 内)。我在下面的代码中将此区域称为range。在本例中，阴影区域的范围为 65% 到 85%

HTML

<div id="slider-shaded"><div id="range"></div></div>

CSS

#range {
    position: absolute;
    height:100%;
    width:20%;
    top: 0;
    left: 65%;
    background-color:gray;
}

Javascript

$(document).ready(function() {
    $("#slider-shaded").slider();
});

我在观看《广告狂人》时制作了一个过度杀伤性的演示。 Here .