intervallo ionico non può fare clic su ios

Question

Sto utilizzando l'input "range" ionico in un progetto multipiattaforma. Per il browser Android e PC, se faccio clic sull'area lontano dal nodo di scorrimento, il nodo di scorrimento salterà al punto in cui clic e il valore verrà aggiornato.

Ma per IOS, quando faccio clic sull'area lontano dal nodo di scorrimento, non si verifica alcun cambiamento di valore. E questo rende anche il mio cursore difficile da cliccare, ho bisogno di fare clic molto preciso sul nodo del cursore, altrimenti il ​​cursore non scorrerà. Qualche idea?

Answer 1

Credo di aver trovato una soluzione per questo. Add on-tap() per il vostro elemento in questo modo:

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

Poi aggiungere questo nel controller (o si sentono liberi di fare una direttiva fuori di esso)

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

Essenzialmente quello che stai facendo è calcolare la posizione del rubinetto relativamente allo schermo e quindi regolare il valore per lavorare con il cursore, per ottenere il valore di input effettivo che sarebbe stato . Quindi aggiorni il modello.

MODIFICA: Questo funzionerà solo con l'evento click/tap. Per renderlo più fluido e naturale, è necessario abilitare il trascinamento/trascinamento anche sulle tracce di scorrimento. Una correzione molto semplice consentirà agli sviluppatori di fare ciò. Basta aggiungere on-drag = "onTap ($ event)" in modo che il tuo html assomigli a questo.

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