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?


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'] }}
  • I will try that. Thank you. – Mario Jan 13 at 19:56
  • It works - but I had to do a small addition: var config = { 'paths': {'touchpunch':'Vendor_MyModule/js/jquery-ui-touch-punch'}, 'shim': {touchpunch: {deps: ['jquery','jquery/ui']}} } I had to use brackets around the deps. Thank you again! – Mario Jan 14 at 10:55
  • 1
    Ah yes, you are right. I edited the answer. Glad to help :) – CrazyMachine Jan 14 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.