當我將手柄從步驟0移動到步驟50時，如何覆蓋Ajax Slider Extender的軌道，並將這些步驟塗成灰色？

Question

我的文本框中有一個Ajax Slider Extender，我使用樣式表將軌改爲綠色，這樣很好，很花哨。這裏是我的滑代碼...

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> 
<div> 
    <asp:TextBox ID="SliderID" runat="server"></asp:TextBox> 
    <asp:SliderExtender ID="SliderExtender1" runat="server" 
     TargetControlID="SliderID" 
     BehaviorID="BoundControl" 
     Minimum="0" 
     Maximum="100" 
     RailCssClass="SliderRail" 
     Orientation="Horizontal" 
     EnableHandleAnimation="true" 
     Steps="100"> 
    </asp:SliderExtender> 
</div> 

，這裏是我的CSS那麼遠，

.SliderRail { 
position: relative; 
height: 18px; 
width: 100%; 
background-color:green; 

}

我知道如何將圖像添加到手柄，但我試圖弄清楚的是，當我將步驟從0移動到步驟50時，我需要用深灰色掩蓋這些步驟，而我無法真正弄明白。

我已經嘗試將圖像添加到句柄，並試圖將寬度設置爲100％，但對我而言這根本不起作用。

我的最終結果是找出這個問題，然後嘗試使用多處理擴展器來複制這個問題，當我在兩端都具有處理器時，它將執行與左手柄相同的操作，只是向後。然後我需要確保手柄可以在彼此之間運行......但這是我需要做的最終結果。 我不想使用JQuery或JavaScript，只想保持嚴格的CSS。 使用多個手柄的文檔並不多。

如果這個問題已被問過一百萬次，那麼我很抱歉，我一定是使用了錯誤的搜索條件，因爲我沒有找到任何可以告訴我該怎麼做的東西。

感謝所有和任何幫助

Answer 1

http://dotnetslackers.com/Ajax/re-70082_SliderExtender_layout_and_custom_appearance.aspx

自定義外觀 爲了自定義滑塊的外觀，我們需要：

提供一個CSS類鐵路 提供一個CSS類爲手柄 提供手柄圖像的圖像URL。 執行步驟：

1. 爲滑塊的導軌創建一個CSS類。 CSS類必須包含以下屬性：

position屬性必須設置爲relative。 必須提供高度和寬度屬性的默認值。寬度值可以通過SliderExtender的Length屬性覆蓋。 要爲導軌嵌入背景圖像，請使用背景屬性。 2.爲滑塊的手柄創建一個CSS類。 CSS類必須包含以下屬性：

位置屬性必須設置爲絕對。 必須提供高度和寬度屬性的值。 3.爲滑塊的手柄提供圖像。圖像的高度和寬度尺寸必須等於手柄CSS類中指定的高度和寬度值。

1. 將SliderExtender實例的RailCssClass屬性設置爲導軌CSS類的名稱。

2. 將SliderExtender實例的HandleCssClass屬性設置爲句柄CSS類的名稱。

3. 將SliderExtender實例的HandleImageUrl屬性設置爲句柄圖像的URL。