Range Slider triggers on-swipe Gesture

ionic-v1
1

Hi Guys,

My Problem is, that i attached eventhandlers directly on ion-view, to use swipe navigation like this:

<ion-view class="survey" view-title="Frage 1" on-swipe-right="vm.goto('prev')" on-swipe-left="vm.goto('next')">

That works perfect for me, with one exception. If i use a Range Slider or any other Element that interacts with swipe, it triggers my ion-view swipe event handlers for example:

<div class="list">
   <div class="item range range-positive">
       <i class="icon ion-ios-sunny-outline"></i>
       <input type="range" name="volume" min="0" max="100" value="33">
       <i class="icon ion-ios-sunny"></i>
   </div>
 </div>

How can i check, if the current action is taken on a specific element, and not to <ion-view> ? Any Ideas?

Regards

2

You can use this simple directive that will stop propagation of the swipe events for elements like Range Slider or others:

.directive('disableSwipe', function($ionicGesture) {
  return {
    link: function (scope, element, attrs) {

      var disableSwipeListener = function(event) {
        event.stopPropagation();
      }

      $ionicGesture.on("swipeleft", disableSwipeListener, element);
      $ionicGesture.on("swiperight", disableSwipeListener, element);
    }
  };
})

And then use it like this:

<input type="range" name="volume" min="0" max="100" value="33" disable-swipe>
1 Like
3

Exactly what I was looking for.
I will try this today.

Thanks

4

In Ionic 1.3 this is not working anymore because the swiper for idangero.us is used.

New solution: Add the class ‘swiper-no-swiping’ to the range input.

See: http://stackoverflow.com/a/27147316/4587312

1 Like