Slider Does is not draggable on iPad JS error

[asecondwill]

I've raised this ticket in the main Sites repo, but is it actually a foundation-rails issue?

https://github.com/zurb/foundation-sites/issues/11733

The Error The problem is the slider isn't dragable. It also gives an error in the console:

TypeError: touches is undefined on line 133 foundation.util.touch.js

https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.touch.js#L133

To recreate:

To recreate you can do these steps

rails new slider
cd slider

edit gemfile add these:

gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'foundation-rails'
gem 'autoprefixer-rails'

bundle install

then do rails g foundation:install

then edit application.js to add

//= require jquery
//= require foundation

Then add this to a page

<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

Check it drags in desktop. switch to ipad simulator or real and try and move the slider. Doesn't work. error about touches as above.

[asecondwill]

Demo App:

https://github.com/asecondwill/demosliders

[asecondwill]

I found the issue was that I was using jquery 1, which is the default with rails-jquery and the slider needs jquery 3 to be draggable on ios.

replace

//= require jquery

with

//= require jquery3

in application.js

[jackmorizo]

This happens because the jQuery code which calls the Element passes 2 parameters:

// ...
        dispatch: function(a) {
            a = n.event.fix(a);
            var b, c, d, f, g, h = [], i = e.call(arguments), j = (n._data(this, "events") || {})[a.type] || [], k = n.event.special[a.type] || {};
            if (i[0] = a,
            a.delegateTarget = this,
            !k.preDispatch || !1 !== k.preDispatch.call(this, a)) {
                h = n.event.handlers.call(this, a, j),
                b = 0;
                while ((f = h[b++]) && !a.isPropagationStopped()) {
                    a.currentTarget = f.elem,
                    c = 0;
                    while ((g = f.handlers[c++]) && !a.isImmediatePropagationStopped())
                        a.rnamespace && !a.rnamespace.test(g.namespace) || (a.handleObj = g,
                        a.data = g.data,
                        void 0 !== (d = ((n.event.special[g.origType] || {}).handle || g.handler).apply(f.elem, i)) && !1 === (a.result = d) && (a.preventDefault(),
                        a.stopPropagation()))
                }
                return k.postDispatch && k.postDispatch.call(this, a),
                a.result
            }
        },
// ...

Look at the (d = ((n.event.special[g.origType] || {}).handle || g.handler).apply(f.elem, i))

But in the Foundation.util.touch.js the handler passes only 1 parameter to the handleTouch function. unfortunately it passes the wrong parameter.

I propose you change: https://github.com/foundation/foundation-sites/blob/develop/js/foundation.util.touch.js#L124 to: $(el).bind('touchstart touchmove touchend touchcancel', function (elem, event) {

This would solve the Issue.