如标题所示,我正在使用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/