I was using jQuery UI range slider and it was working on desktop very well but my website was responsive and working very well on touche devices. But jQuery UI sliders on touch devices appear to be incompatible when viewed on Ipad and Iphone. So I googled on this issue and found a solution which am explaining here.
There is a jquery.ui.touch-punch plugin which enable jQuery UI components touch compatible. You can find this at https://github.com/furf/jquery-ui-touch-punch#readme.
Here is some example code for using it :
1 2 3 4 5 6 | <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> <script src="jquery.ui.touch-punch.min.js"></script> <script> $('#widget').draggable(); </script> |
This Touch-punch will work fine for IOS and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch).
But there is a fix by just adding the following CSS-rules to the .ui-slider-handle:
1 2 | -ms-touch-action: none; touch-action: none; |
Thanks for the tutorial. However if I follow the tip to use ‘.ui-slider-handle’ instead of “#widget” then I can move the slider-handle all around the screen!!!
Thanks, this worked for me but i used
$(‘.ui-slider-handle’).draggable();
instead of
$(‘#widget’).draggable(); which is mentioned by
PaulSkinner in stackoverflow
http://stackoverflow.com/questions/6360249/jquery-ui-sliders-on-touch-devices
That was a nice tip. Glad it helped you.