0

我的文本框上有一个 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。没有太多关于使用多手柄的文档。

如果这个问题已经被问了一百万次，那么我很抱歉，我一定是使用了错误的搜索词，因为我没有找到任何可以告诉我如何做到这一点的东西。

感谢所有和任何帮助

4

1 回答 1

1

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

自定义外观为了自定义滑块的外观，我们需要：

为导轨提供 CSS 类 为手柄提供 CSS 类 为手柄的图像提供图像 URL。执行步骤：

  1. 为滑块的导轨创建一个 CSS 类。CSS 类必须包含以下属性：

位置属性必须设置为相对。必须提供高度和宽度属性的默认值。可以通过 SliderExtender 的 Length 属性覆盖宽度值。要为栏杆嵌入背景图像，请使用 background 属性。2. 为滑块的手柄创建一个 CSS 类。CSS 类必须包含以下属性：

位置属性必须设置为绝对。必须提供高度和宽度属性的值。3. 提供滑块手柄的图像。图像的高度和宽度大小必须等于句柄的 CSS 类中指定的高度和宽度值。

  1. 将 SliderExtender 实例的 RailCssClass 属性设置为导轨 CSS 类的名称。

  2. 将 SliderExtender 实例的 HandleCssClass 属性设置为句柄 CSS 类的名称。

  3. 将 SliderExtender 实例的 HandleImageUrl 属性设置为句柄图像的 URL。

于 2014-10-08T20:47:44.843 回答