How can I integrate jquery-ui-touch-punch into my module (mobile friendly slider)

Question

So, I created a slider with jquery/ui and it is working so far. But as jquery/ui doesnt support touch events, I am trying to integrate jquery-ui-touch-punch.

I tried to declare it in my requirejs-config:

var config = {
    'paths': {'touchpunch':'Vendor_MyModule/js/jquery-ui-touch-punch'},
    'shim': {touchpunch: ['jquery','jquery/ui']}
}

and I am calling the script in my phtml file like this:

require(['jquery','jquery/ui','touchpunch'], function($){    
    $( "#slider" ).slider();
});

and I put the script to view/frontend/web/js/jquery-ui-touch-punch.js

But still, the slider isnt functional on mobile devices.

I know, that the script depends on jquery and jquery/ui, so I declared them in the phtml file, too.

What am I missing? or is there an even better solution with the knockout library?

Answer 1

You are missing the "deps" property of the "shim". The require-config.js should look like this:

var config = {
    'paths': {'touchpunch':'Vendor_MyModule/js/jquery-ui-touch-punch'},
    'shim': {touchpunch: { deps: ['jquery','jquery/ui'] }}
}