Button touch while sliding range

ionic-v1
1

I’d like to press a button while I’m sliding a range and am having trouble. While the range slider is moving or actively being touched, touching a button will fire the button’s event only once. Further presses of the button appear to activate it, but it does not call the event function. The event handling is nothing fancy: the button uses on-touch for a function in my controller and the range input is bound using ng-model.

Is there a way to make this work? I’ve done some tests and can see that the button is being touched/pressed, but am not sure how to proceed.

Example (while actively sliding the range, press the button repeatedly). Testing with Ionic View app.

html:

  <ion-content class="padding" ng-controller="RangeCtrl">

    <button type="button" class="button button-large" 
        on-touch="buttonTouch()">
      <i class="icon ion-pinpoint"></i>
    </button>

    <div class="padding">
      <canvas width="100" height="100" style="background: {{flipColor}};">
      </canvas>
    </div>

    <div class="range range-positive">
      <input type="range" ng-model="level">
      <span class="padding-left">{{level}}</span>
    </div>

  </ion-content>

app.js:

.controller('RangeCtrl', function($scope) {
  $scope.flip = false;
  $scope.flipColor = 'green'
  $scope.level = "50";

  $scope.buttonTouch = function() {
    $scope.flip = !$scope.flip;

    $scope.flipColor = $scope.flip ? 'blue' : 'green';
  }
})