javascript - Angular Slider Touch not working with directive - Stack Overflow

admin管理员组

文章数量:1025332

I am using the following directive in my application

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!

I am using the following directive in my application

https://github./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!

• javascript
• angularjs
• touch
• angularjs-directive
• uislider

Share Improve this question Follow asked Oct 22, 2013 at 11:20 jehjeh 2,45355 gold badges2626 silver badges4040 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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)

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.

Using Ryan's fix above, I managed to get my sliders working as expected. However, as mentioned in the ments, 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];

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.

I am using the following directive in my application

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!

I am using the following directive in my application

https://github./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!

• javascript
• angularjs
• touch
• angularjs-directive
• uislider

Share Improve this question Follow asked Oct 22, 2013 at 11:20 jehjeh 2,45355 gold badges2626 silver badges4040 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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)

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.

Using Ryan's fix above, I managed to get my sliders working as expected. However, as mentioned in the ments, 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];

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.

本文标签： javascriptAngular Slider Touch not working with directiveStack Overflow