Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Add touch screen drag capabilities to AJAX multihandlesliderextender

$
0
0

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">





<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.


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>