Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?
    text
    copied!<p>I have an Ajax Slider Extender on my textbox, I am using a style sheet to change the rail to color green, that's going fine and dandy. Here is my code for the slider...</p> <pre><code>&lt;asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt;&lt;/asp:ToolkitScriptManager&gt; &lt;div&gt; &lt;asp:TextBox ID="SliderID" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;asp:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="SliderID" BehaviorID="BoundControl" Minimum="0" Maximum="100" RailCssClass="SliderRail" Orientation="Horizontal" EnableHandleAnimation="true" Steps="100"&gt; &lt;/asp:SliderExtender&gt; &lt;/div&gt; </code></pre> <p>and here is my CSS so far...</p> <pre><code>.SliderRail { position: relative; height: 18px; width: 100%; background-color:green; </code></pre> <p>}</p> <p>I know how to add an image to the handle, but what I am trying to figure out is how when I move the handle from step 0 to step 50, I need to mask over those steps with a dark grey and I can't really figure it out.</p> <p>I have tried adding an image to the handle and have tried setting the width to a 100%, but that didn't work out at all for me.</p> <p>My end result is figuring this problem out, then trying to replicate this using a multi handle extender when I have both handles at either end, it would do the same as the left handle, just backwards. Then I'll need to make sure that the handles can run over eachother...But that is the end result that I need to do. I don't want to use JQuery or JavaScript, just want to keep it strictly css. There isn't much documentation on using multi handles.</p> <p>If this question has been asked a million times then I apologize, I must have been using the wrong search terms because I haven't found anything to tell me how to do this.</p> <p>Thanks for all and any help</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload