0

正如标题所说，我正在使用 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来完成。

最后，我希望滑块看起来像这样： 在此处输入图像描述

4

1 回答 1

0

我不确定组件的滑动 js 是什么样的，以及它是否改变了手柄的顶部位置。如果它没有改变，你可以将它添加到 .handleClass

top:-5px;

如果你想改变颜色，你必须在手柄上有另一个不透明度：0的div，当手柄向右移动时，它会改变它的透明度。如果您提供一些句柄js，也许我可以添加一些代码。

于 2013-08-08T07:21:11.770 回答