jQuery UI slider Touch & Drag/Drop support on Mobile devices
JqueryJquery UiTouchJquery Ui-SliderJquery Problem Overview
I have already styled and implemented jQuery UI slider into a project. Though it's responsive, the slider does not respond to being touched and dragged. Instead, you have to touch where you want the slider to go. I'd like to avoid swapping to jQuery mobile UI, which supports touching and dragging, since we already extensively use jQuery (non-mobile) UI.
The functionality we want:
Here
What we are using: Here
On a desktop you can't tell the difference. On a mobile device it is apparent.
Anyone know how to add this support to jquery UI?
$("#videographers").slider({
value: 2,
min: 1,
max: 3,
step: 1,
slide: function(event, ui) {
return calcTotal(ui.value);
}
});
Jquery Solutions
Solution 1 - Jquery
jQuery ui doesn't have touch support. You should use it with jQuery-ui touch punch.
Just add the script after jQuery ui:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
You can also use cdnjs:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
Note: Better give this repo a star on Github.
Solution 2 - Jquery
You can just link this js.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
thanks.
Solution 3 - Jquery
if you are in Wordpress you can use this code in functions.php:
add_action( 'wp_head', function () {
// jquery.ui.touch-punch
wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );
}, 999 );