Javascript Ajax控件工具包滑块处理程序图像定位

正如标题所说，我正在使用ajax控件工具包SlideXtender。一切正常，但控件的样式不正常。我正在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>

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

控件如下所示：

我试图做的但没有成功的是把手柄图像稍微高一点，这样导轨就在处理器的中间。另外，我希望滑块的左侧是某种颜色，右侧是某种其他颜色，拖动滑块时，这些颜色将发生变化。我认为这可以通过一些javascript来实现

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

---

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

top:-5px;

如果要更改颜色，则必须在控制柄上具有另一个不透明度为0的div，该值随着控制柄向右移动而更改其透明度。如果您提供一些句柄js，也许我可以添加一些代码

top:-5px;