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

Question

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

我们需要允许教师设置所需的背景范围（以显示给定等级的理想值与实际值）。我希望设置一个阴影区域（如this picture所示），该区域将指示查看滑块的人员需要哪些值。如果手柄在所需范围内，则该值是令人满意的。如果手柄超出背景阴影范围，则可能需要进行一些更改。

有关如何完成此任务的任何建议？基于我使用Firebug进行的实验，它看起来像<div class="ui-slider">设置，但它内部的值似乎不允许设置背景颜色（只有div允许）。

感谢您的帮助。

Answer 1

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

正如你所说，我会使用div（此处称为slider-shaded）制作滑块，然后在其中放入另一个div来标记该区域。这接近于jQuery如何做（将div放在滑块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