For an ionic framework app, 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 touches of the button appear to activate it (it depresses on screen), 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.
To reproduce:
I don't know that this can be tested in a browser, as it requires touching both controls at the same time (I used the Ionic View app).
example:
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>
controller
.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';
}
})