Trouble with directive causes Angular Slider Touch functionality to fail

Question

Trouble with directive causes Angular Slider Touch functionality to fail

Currently, I am implementing a directive in my application

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

Most of the functionality is working fine except for touch support when trying to drag the sliders on the screen. Touch support seems to work on the provided examples but not in my application. I have verified that I am using the same version of angular, etc.

Here is the relevant code snippet from my application:

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 make any additional adjustments to enable touch support for mobile devices?

Thank you!

javascript angularjs touch angularjs-directive uislider

Answer 1

Answer №1

For those still facing this issue, a potential solution can be found here: JS: Understanding the event.touches property. It seems that jQuery may not be passing the touches property in its custom event object.

This adjustment worked for me:

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

Change it to:

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

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

Answer 2

For those still facing this issue, a potential solution can be found here: JS: Understanding the event.touches property. It seems that jQuery may not be passing the touches property in its custom event object.

This adjustment worked for me:

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

Change it to:

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

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

Answer 3

Answer №2

It appears from the slider directive code that there is no specific need for additional setup to enable touch event support. I have created a plunker example here using the provided code, and it functions correctly. Testing was conducted on my Sony Xperia phone using Google Chrome.

Answer 4

It appears from the slider directive code that there is no specific need for additional setup to enable touch event support. I have created a plunker example here using the provided code, and it functions correctly. Testing was conducted on my Sony Xperia phone using Google Chrome.

Answer 5

Answer №3

After implementing the suggestions from Ryan above, I successfully resolved the issue with my sliders. However, it seemed to cause a problem in Firefox as well, as noted in the comments. To address the Firefox compatibility issues, certain modifications need to be made within angular-slider.js:

Line 79:

Modification:

sliderDirective = function($timeout) {

Add a $window parameter:

sliderDirective = function($timeout, $window) {

Line 227:

Modification:

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

Include a customEvent parameter in the onMove() function and assign a custom event variable (myEvent):

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

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

This adjustment allows the function to utilize the native window.event variable in Firefox or the one provided by the library.

Line 317:
Finally, update the dependency declaration by replacing:

qualifiedDirectiveDefinition = ['$timeout', sliderDirective];

with $window included:

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

Answer 6

After implementing the suggestions from Ryan above, I successfully resolved the issue with my sliders. However, it seemed to cause a problem in Firefox as well, as noted in the comments. To address the Firefox compatibility issues, certain modifications need to be made within angular-slider.js:

Line 79:

Modification:

sliderDirective = function($timeout) {

Add a $window parameter:

sliderDirective = function($timeout, $window) {

Line 227:

Modification:

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

Include a customEvent parameter in the onMove() function and assign a custom event variable (myEvent):

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

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

This adjustment allows the function to utilize the native window.event variable in Firefox or the one provided by the library.

Line 317:
Finally, update the dependency declaration by replacing:

qualifiedDirectiveDefinition = ['$timeout', sliderDirective];

with $window included:

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

Answer 7

Answer №4

Another option to consider is using ng-slider

This plugin enables touch device users to simply click on the toggle instead of having to drag, which can be challenging on touchscreens.

Additionally, ng-slider provides a wide range of features and customization options to enhance user experience.

Answer 8

Another option to consider is using ng-slider

This plugin enables touch device users to simply click on the toggle instead of having to drag, which can be challenging on touchscreens.

Additionally, ng-slider provides a wide range of features and customization options to enhance user experience.

Trouble with directive causes Angular Slider Touch functionality to fail

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Generating XML format from JSON using JavaScript

Problems with Ajax calls are preventing Internet Explorer9 and Internet Explorer10 from functioning properly

Create automated scripts with Selenium using the programming language JavaScript

What is the method to allocate the smallest available number that has not yet been assigned?

What causes the Invariant Violation: Invariant Violation: Maximum update depth exceeded error to occur when using setState()?

Capture the response from an AJAX request and store it in a JavaScript variable

Encountering a surprising token error while running a node.js application with a classic example

Why does the MEAN Stack continue to route using the '#' symbol in the URL?

Exploring the FormData Object in Mongoose

Converting multipart/form-data to multipart/mixed: A step-by-step guide

How can I avoid using the appendTo method in jQuery?

Discovering the art of line breaks

Using tabs within a Dialog prevents the Dialog from adjusting its height automatically

The Material UI Drawer is fading into the background instead of smoothly sliding into view

What is the most effective way to bring in "server-side only" code in Next.js?

When executing code in React JS, I encountered no errors, but the output did not match my expectations

Using Ember's transitionTo method and setting a controller attribute within a callback

Executing simultaneous asynchronous queries with Mongoose results in an error: `SyntaxError: Illegal return statement` due to

Transfer data from distinct arrays to separate variables

Guide to initiating a node.js socket.io server through a brackets extension