ionic range cannot click on ios

Question

I am using ionic "range" input in a cross platform project. For android and PC browser, if I click on the area away from the slider node, the slider node will jump to the point I click and the value will be updated.

But for IOS, when I click the area away from the slider node, no value change is happening. And this also make my slider difficult to click, I need to click very accurate right on the slider node, else the slider will not slide. Any idea?

Answer 1

I believe I have found a solution for this. Add on-tap() to your element like so:

    <div class="range">
        <input type="range" on-tap="onTap($event)" ng-model="barProgress" min="0" max="100">
    </div>

Then add this in your controller (or feel free to make a directive out of it)

    $scope.onTap = function(e) {
      if(ionic.Platform.isIOS()) {
        $scope.barProgress = (e.target.max / e.target.offsetWidth)*(e.gesture.touches[0].screenX - e.target.offsetLeft);
      }
    };

Essentially what you are doing is calculating the position of the tap relative to the screen, and then adjusting the value to work with the slider, to get the actual input value that it would have been. Then you update the model.

EDIT: This will only work with click/tap event. To make it more smooth and natural, we need to enable swipe/dragging on slider tracks too. Very simple fix will allow devs to do this. Just add on-drag="onTap($event)" so that your html look like this.

<div class="range">
    <input type="range" on-tap="onTap($event)" on-drag="onTap($event)" ng-model="barProgress" min="0" max="100">
</div>