如标题所示,我正在使用ajax控件工具包SliderExtender。一切正常,但控件的样式不正确。我在aspx页面中使用此代码

<asp:TextBox runat="server" ID="textBoxSlider"></asp:TextBox>
<asp:SliderExtender Orientation="Horizontal" ID="sliderExtenderControl" TargetControlID="textBoxSlider" HandleCssClass="handleClass" RailCssClass="railClass" EnableHandleAnimation="True" runat="server"></asp:SliderExtender>


和CSS类:

.handleClass {
    width: 44px;
    position: absolute;
    height: 18px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    overflow: hidden;
    background-color: #455f47;
    background-image: -webkit-linear-gradient(bottom, #5e5e5e, #8f8f8f);
    background-image: -moz-linear-gradient(bottom, #5e5e5e, #8f8f8f);
    background-image: -o-linear-gradient(bottom, #5e5e5e, #8f8f8f);
    background-image: -ms-linear-gradient(bottom, #5e5e5e, #8f8f8f);
    background-image: linear-gradient(to top, #5e5e5e, #8f8f8f);
}

.railClass {
    width: 450px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #61bb46;
    position: relative;
}


我有一个图像的滑块处理程序,高度:18px和宽度44px。

该控件如下所示:


我试图做但没有成功的是将手柄图像稍高一点对齐,以使导轨位于处理器的中间。我也希望滑块的左侧为某些颜色,右侧为其他颜色,并且此颜色将在滑块拖动时改变。我认为可以用一些javascript完成。

最后,我希望滑块看起来像这样:

最佳答案

我不确定组件的滑动js是什么样子,以及它是否更改了句柄的顶部位置。如果未更改,则可以将其添加到.handleClass

top:-5px;


如果要更改颜色,则必须在手柄上另设置一个div,其透明度为opacity:0,当手柄向右移动时,它会更改其透明度。如果提供一些handle js,也许我可以添加一些代码。

关于javascript - Ajax Control Toolkit滑块处理程序图像定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18119961/

10-11 12:26
查看更多