Ajax Control Toolkit滑块处理程序图像定位

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;
}

我有一个滑块处理程序的图像，高度为：18像素，宽度为44像素。

控件如下所示：

我想要做的但是没有成功的是将把手图像稍微高一些，以便轨道将位于处理程序的中间。此外，我希望滑块的左侧是一些颜色，右侧是其他颜色，这种颜色将在滑块拖动时改变。我认为这可以用一些javascript来完成。

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

Answer 1

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

top:-5px;

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