jQuery滑块-设置背景颜色以显示所需范围

我正在设置一个jQueryUI滑块，并在成绩册中使用它

我们需要允许教师设置一个期望的背景范围（显示期望值与给定等级的实际值）。我希望设置一个阴影区域（如中所示），以指示查看滑块的人需要哪些值。如果手柄在所需范围内，则该值符合要求。如果控制柄超出背景着色范围，则可能需要进行一些更改

关于如何做到这一点有什么建议吗？根据我使用Firebug所做的实验，它看起来像是设置了一个

，但是它里面的值似乎不允许设置背景颜色（只有div允许）

---

谢谢您的帮助。

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

正如您所说，我将使用一个div（这里称为

slider shaded

）来制作滑块，然后在其中放置另一个div来标记该区域。这与jQuery的工作方式非常接近（在sliderdiv中放置一个div）。我在下面的代码中调用了这个区域

range

。在此示例中，着色区域的放置范围为65%到85%

HTML

Javascript

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

---

我在看《广告狂人》时做了一个杀伤力过大的演示

这里介绍了jQuery插件：这非常有用。谢谢，我想应该这样做！

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

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