like the title says, i am using ajax control toolkit SliderExtender . Everything works fine but not the styling of the control. I am using this code in aspx page
<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>
and the CSS classes :
.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;
}and i have an image for slider handler with height : 18px and width 44px .
The control looks like this :
what i am trying to do but without success is to align the handle image slightly higher so that the rail will be in the middle of the handler. Also i want that the left side of the slider to be a some color and the right side some other color and this colors will change on slider dragging. i think this could be done with some javascript.
In the end i would like the slider to look something like this :
