Add touch screen drag capabilities to AJAX multihandlesliderextender

See more:

ASP.NET

Ajax

Hi

I have added a AJAX MultiHandleSliderExtender to my site and I have customised the layout. This is now all working correctly and I can drag the slider rails using the mouse. However when I try to drag the slider using the touch screen monitor it doesn't seem to work. I can click on the rail using touch screen and the rail will move to that position but ideally i would like the user to touch the rail and drag it to the required value.

The client are positive that they want to use touch screen monitor for this solution so I need to get this working. However I can not find any article regarding this. Any pointers of help with this would be greatly appreciated.

Below is a an example of the code.

Minimum:
<asp:TextBox ID="txtMin" runat="server" CssClass="txtSmall">
Maximum:
<asp:TextBox ID="txtMax" runat="server" CssClass="txtSmall">
<ajaxToolkit:MultiHandleSliderExtender ID="txtMultiHandleSliderExtender" RailCssClass="SliderRail" Length="1000" runat="server" BehaviorID="MultiHandleSliderExtender" HandleAnimationDuration="0.1" Maximum="25" Minimum="1" TargetControlID="txtSlider" EnableHandleAnimation="True">
<multihandleslidertargets>
<ajaxtoolkit:multihandleslidertarget controlid="txtMin" handlecssclass="SliderHandle" xmlns:ajaxtoolkit="#unknown">
<ajaxtoolkit:multihandleslidertarget controlid="txtMax" handlecssclass="SliderHandle" xmlns:ajaxtoolkit="#unknown">


<asp:TextBox ID="txtSlider" runat="server">
CSS
.txtSmall
{
border:1px solid #3A3A37;
background-color:#FFFFFF;
color:#373737;
width:50px;
height:40px;
font-size:20px;
}

.SliderHandle {
position: absolute;
background: url('../Design/Images/btn3.png') no-repeat;
height:30px;
width: 30px;
}

.SliderRail {
position: relative;
background: url('../Design/Images/slider.jpg') repeat-x;
height: 22px;
width: 150px;
}

What I have tried:

I have tried to amend the settings of the actual MultiHandleSliderExtender and the associated CSS classes with no effect