Angular Slider Touch not working with directive

Question

I am using the following directive in my application

https://github.com/prajwalkman/angular-slider

It's all working ok apart from touch support when I'm trying to drag the sliders across the screen. Touch works on the examples given but not on my application. I have checked I'm using the same version of angular etc.

My code: filter.js (Controller)

$scope.lower_price_bound = 50;
$scope.upper_price_bound = 3000;

html

<slider floor="10" ceiling="3000" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>

Do I need to add anything to get touch support for mobile devices?

Thanks!

score 3 · Answer 1 · edited May 23 '17 at 12:20

3

For anyone still experiencing this issue, this might help: JS: How does event.touches property work? "It sounds like jQuery isn't passing the touches property on in its custom event object."

This fixed it for me. Change this:

onMove = function (event) {
              var eventX, newOffset, newPercent, newValue;
              eventX = event.clientX || event.touches[0].clientX;
              ...

to

 onMove = function () {
              var eventX, newOffset, newPercent, newValue;
              eventX = event.clientX || event.touches[0].clientX;
              ...

(line 227 on my version of angular-slider.js)

edited May 23 '17 at 12:20

Community

1
1

answered Oct 05 '14 at 06:07

Ryan

120
2
11

Thanks! I don't get why you omit the "var" though? – user1259201 Oct 09 '14 at 09:57
Delos, check out my answer below for a Firefox solve. – spez86 Nov 19 '14 at 16:46

score 1 · Answer 2 · answered Oct 22 '13 at 19:22

1

From the code of the slider directive it seems that you don't need to do anything special to support touch events. I have assembled a plunker here with the code you provide and everything is working as expected. I have tested it with chrome on my Sony xperia phone.

answered Oct 22 '13 at 19:22

Nicolas ABRIC

4,925
28
18

Thanks for your reply. The example you have provided also works on my mobile. I have come to the conclusion it is my app that somehow conflicts with the touch support. I'm using a MEAN stack and I even created an app with just a slider and I'm still getting no touch support - the pointer does highlight on touch but there is no drag. – jeh Oct 22 '13 at 22:18
Is there anyway jquery/another lib could be causing a conflict here? – jeh Oct 22 '13 at 22:37
Two common conflicts I can think of. 1/ you have an overflow on your page and the browser can't tell if you want to move the page around or start the slider drag (try to put css overflow:hidden on the body tag). 2/ Somewhere in the code there is an event handler on touchmove that stops the propagation of the dom event. But this one will be more difficult to spot. – Nicolas ABRIC Oct 23 '13 at 05:30
1

Thanks again. I finally found out what was causing the issue. For some reason if I loaded jquery before the slider there was a conflict. Loading it after the slider and it works fine. Thank you for your help. – jeh Oct 23 '13 at 12:51
Loading it after the slider would imply that you're using jqLite with angular for the angular-slider, which causes other issues. – Delos Chang Oct 22 '14 at 23:43

score 0 · Answer 3 · answered Nov 19 '14 at 15:52

Using Ryan's fix above, I managed to get my sliders working as expected. However, as mentioned in the comments, it did break Firefox for me as well. In order to fix the Firefox issues, the following changes are also needed inside of angular-slider.js:

Line 79:

Change:

sliderDirective = function($timeout) {

By adding a $window paramater:

sliderDirective = function($timeout, $window) {

Line 227:

Change:

onMove = function () {
    var eventX, newOffset, newPercent, newValue;
    eventX = event.clientX || event.touches[0].clientX;
    ...

By adding a customEvent parameter to the onMove() function and assigning your own event variable (myEvent):

onMove = function(customEvent) {
    var eventX, newOffset, newPercent, newValue,
        myEvent = $window.event || customEvent;

    eventX = myEvent.clientX || myEvent.touches[0].clientX;
    ...

This way, the function will either use the native window.event variable (which exists in Firefox), or the one provided by the library.

Line 317:
Lastly, update the dependency declaration by changing:

qualifiedDirectiveDefinition = ['$timeout', sliderDirective];

to include $window

qualifiedDirectiveDefinition = ['$timeout', '$window', sliderDirective];

score 0 · Answer 4 · answered Jan 29 '15 at 22:26

0

You could also try ng-slider

It allows touch devices to click on the toggle instead of dragging (which is highly difficult on touch devices).

It offers a lot more features and configuration as well.

answered Jan 29 '15 at 22:26

Oly

101
1

Angular Slider Touch not working with directive

4 Answers4