How can I detect Touchend or end of changing a range value?

Question

I'm using AngularJS with Ionic Framework. I'm developing a live communication application.

I have a range slider ionic docu. If I use ng-change every step calls my callback, but I only want to transfer the end result. On desktop I can use ng-mouseup but I can't find a solution on mobile devices. Creating a delay is no solution for me because it must be fast.

Answer 1

You can try to use the on-release event directive Ionic provides. The example below is untested, but should give you an idea.

http://ionicframework.com/docs/api/directive/onRelease/

Markup

<div class="range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume" ng-model="temp.volume" on-release="onRelease()">
  <i class="icon ion-volume-high"></i>
</div>

Controller

angular.module('App').controller(function ($scope) {
  $scope.onRelease = function () {
    $scope.volume = $scope.temp.volume;
  };
});