javascript - Ajax 控制工具包 slider 处理程序图像定位

Question

正如标题所说，我正在使用 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;
}

我有一个 slider 处理程序的图像，高度为:18px，宽度为 44px。

控件看起来像这样:

我正在尝试做但没有成功的是将 handle 图像稍微高一点，以便导轨位于 handle 的中间。我还希望 slider 的左侧是某种颜色，右侧是其他颜色，并且这种颜色会在拖动 slider 时发生变化。我认为这可以用一些 javascript 来完成。

最后我希望 slider 看起来像这样:

Answer 1

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

top:-5px;

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