jQuery的滑塊 - 設置背景色，以表現出理想的範圍

Question

我設置了一個長絲組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。