Range slider doesn't work on Chrome v33

[danielcrisp]

Range slider doesn't work on Chrome v33

[danielcrisp]

I can't replicate any problems using Chrome v33

Do you have the same problem on the demo page? http://danielcrisp.github.io/angular-rangeslider/demo/

[CalvinDale]

I see the same problem with the demo page. Namely, the thumbs don't respond to the mouse. I am using Chrome version 34.0.1847.11 beta-m on Windows 7 Prof (V6.1).

As a hack, one can tweak the onEvent, moveEvent, and offEvent assignments to replace the touch events with the corresponding mouse events. This hack will enable the thumbs to work with mouse input. But unfortunately it also prevents them from responding to touch.

//onEvent = (EVENT === 1 ? 'pointerdown' : (EVENT === 2 ? 'MSPointerDown' : (EVENT === 3 ? 'touchstart' : 'mousedown'))) + eventNamespace,
//moveEvent = (EVENT === 1 ? 'pointermove' : (EVENT === 2 ? 'MSPointerMove' : (EVENT === 3 ? 'touchmove' : 'mousemove'))) + eventNamespace,
//offEvent = (EVENT === 1 ? 'pointerup' : (EVENT === 2 ? 'MSPointerUp' : (EVENT === 3 ? 'touchend' : 'mouseup'))) + eventNamespace,

onEvent = (EVENT === 1 ? 'pointerdown' : (EVENT === 2 ? 'MSPointerDown' : (EVENT === 3 ? 'mousedown' : 'mousedown'))) + eventNamespace,
moveEvent = (EVENT === 1 ? 'pointermove' : (EVENT === 2 ? 'MSPointerMove' : (EVENT === 3 ? 'mousemove' : 'mousemove'))) + eventNamespace,
offEvent = (EVENT === 1 ? 'pointerup' : (EVENT === 2 ? 'MSPointerUp' : (EVENT === 3 ? 'mouseup' : 'mouseup'))) + eventNamespace,

[danielcrisp]

Ok I see - at the moment it only expects mouse OR touch support, not both.

var EVENT = window.PointerEvent ? 1 : (window.MSPointerEvent ? 2 : ('ontouchend' in document ? 3 : 4)), // 1 = IE11, 2 = IE10, 3 = touch, 4 = mouse

So probably we need to listen for mouse events even when touch support is detected and then cancel the mouse event when a touch event is triggered to prevent things happening twice.

Does this work?

onEvent = (EVENT === 1 ? 'pointerdown' + eventNamespace : (EVENT === 2 ? 'MSPointerDown' + eventNamespace : (EVENT === 3 ? 'touchstart' + eventNamespace + ' mousedown' + eventNamespace : 'mousedown' + eventNamespace))),
moveEvent = (EVENT === 1 ? 'pointermove' + eventNamespace : (EVENT === 2 ? 'MSPointerMove' + eventNamespace : (EVENT === 3 ? 'touchmove' + eventNamespace + ' mousemove' + eventNamespace : 'mousemove' + eventNamespace))),
offEvent = (EVENT === 1 ? 'pointerup' + eventNamespace : (EVENT === 2 ? 'MSPointerUp' + eventNamespace : (EVENT === 3 ? 'touchend' + eventNamespace + ' mouseup' + eventNamespace : 'mouseup' + eventNamespace))),

Untested, plus all the + eventNamespace aren't very elegant

Also need to find a way to cancel the mouse events

[CalvinDale]

Unfortunately I'm still seeing the same behavior with these new assignments as with my previous hack. I.e., Chrome doesn't respond to touch but does respond to the mouse. But Firefox and IE respond to both.

[danielcrisp]

Hmm I don't have access to a touch screen computer so I'm not sure how I can debug this.

Is there a way I can emulate it?

Maybe the client method needs updating based on this: http://stackoverflow.com/questions/18761078/detect-touch-events-in-chrome-on-windows-8-with-touchscreen

[CalvinDale]

Though I haven't found time to pursue it thoroughly yet, my attempts so far to use the approach outlined in the stackoverflow article that you mentioned have been fruitless. Specifically the event.touches property is undefined even though the event is labelled 'touchstart'. So that's suprising. As an alternative I briefly tried using the Polymer PointerEvents polyfill. But I didn't get it wired up properly with its dependencies. However, I subsequently observed that the widgets on the Polymer site aren't responding to touch on Win7|Win8 — Chrome|Canary either. Therefore I suspect that their polyfill won't work for this angular range-slider either.

[danieljoppi]

I fix this problem in EVENT == 3 ... insert 'X' before 'touchstart' ==>> 'touchstart' + eventNamespace + 'X' + ' mousedown' + eventNamespace

Replace this:
//onEvent = (EVENT === 1 ? 'pointerdown' : (EVENT === 2 ? 'MSPointerDown' : (EVENT === 3 ? 'touchstart' : 'mousedown'))) + eventNamespace,

for this:
onEvent = (EVENT === 1 ? 'pointerdown' + eventNamespace : (EVENT === 2 ? 'MSPointerDown' + eventNamespace : (EVENT === 3 ? 'touchstart' + eventNamespace + 'X' + ' mousedown' + eventNamespace : 'mousedown' + eventNamespace))),

work!

[Agnate]

danieljoppi's fix worked for me!

[andreaslarssen]

Hm.... Can't get this working.

[cameronlowry]

The new dev tools on chrome allow you to emulate a touch screen device. I can replicate this issue in Chrome Version 37.0.2062.120 m

Open dev tools
Enable emulation
Enable 'Emulate touch screen'
Disable 'Emulate touch screen'

The sliders no longer respond to click.

https://developer.chrome.com/devtools/docs/device-mode

I have the same issue on a laptop which has a touch screen. The sliders do not respond to click events.