Ion-range responds extremely slowly when bound and inserted via *ngFor

[AlGantori]

Ionic version: (check one with "x") [ ] 1.x [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: I have the following prop in my data provider/service...

 get Comparisons(): number[] {
    if (this.data == null)
      return [];
    // console.log('PWCInputProvider------------>>Comparisons', r);
    return this.data.HDM.Level[1].E[2].w;  // returns an array of 3 numbers (for now)
  }

Here is the html

<p>
    Comparisons....
  </p>
  <ion-list>
    <ion-item *ngFor="let w of PWCInputProvider.Comparisons; let i = index">
      <ion-range min="0" max="100" pin="true" debounce="50"  [(ngModel)]="PWCInputProvider.Comparisons[i]"  >
        <ion-label range-left class="small-text">Apples</ion-label>
        <ion-label range-right>Oranges</ion-label>
      </ion-range>
    </ion-item>
  </ion-list>

If I enable the console.log I will see a zillion calls to the Comparisons property while I try to move the slider (range) and it responds very very slowly and the range pin won't even display, rendering this user control not usable.

I would like the 2-way binding between the ranges and some corresponding model in my data provider class (an array of integers representing the latest values).

Expected behavior: range sliders responds to human interaction

Steps to reproduce: make a provider return an array of 3 numbers and use it to insert 3 range selectors bound to each element of this collection. The insertion in the view should be done via an *ngFor (ie. dynamic)

Here is a plunker http://plnkr.co/edit/ps2YEfwdHhgC0YcU0lJ2?p=preview

-->

Related code: Other information: If I remove the ngModel altogether I get a normal UI response from the range selectors, smooth sliding, the pin pops, shows value and has an animation, but of course all ranges inserted in this manner are just vanilla, unbound and no initial value.

UPDATE It appears as if inserting ranges via the ngFor AND making them bound is the problem. My current test data returns an array of 3 numbers, if I insert an instance of the range bound to the second element as below explicitly before the ngFor, then I get the following behavior on the 4 resulting ranges in the view. This first instance responds just fine to human interaction and also causes the 3rd instance to sync (expected). However, all 3 instances (2nd, 3rd and 4th) of the range control inserted via the *nfFor do not respond to human interaction (I guess busy making calls to the bound model).

<ion-range min="0" max="100" pin="true" [(ngModel)]="PWCInputProvider.Comparisons[1]">
    <ion-label range-left class="small-text">Apples</ion-label>
    <ion-label range-right>Oranges</ion-label>
  </ion-range>

  <ion-list>
    <ion-item *ngFor="let w of PWCInputProvider.Comparisons; let i = index">
      <ion-range min="0" max="100" pin="true" [(ngModel)]="PWCInputProvider.Comparisons[i]">
        <ion-label range-left class="small-text">Apples</ion-label>
        <ion-label range-right>Oranges</ion-label>
      </ion-range>
    </ion-item>
  </ion-list>

IMPROVEMENTS Why doesn't ion-range work like other ionic components eg. label, textbox, etc... why is ngModel needed? Could it be simplified to something like <ion-range>{{w}}<ion-range>

other parameters could be supplied as attributes. including the initial/bound value like so: <ion-range min="0" max="100" value="{{w}}" ><ion-range>

This would make it more intuitive and ionic-like :) Thank you.

global packages:

    @ionic/cli-utils : 1.0.0
    Cordova CLI      : 7.0.0
    Ionic CLI        : 3.0.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.0.0
    @ionic/cli-plugin-ionic-angular : 1.0.0
    Ionic Framework                 : ionic-angular 3.2.0

System:

    Node       : v7.2.0
    OS         : Windows 7
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[jgw96]

Hello, thanks for opening an issue with us. Would you mind posting a plunker or minimal repo we could use to reproduce this issue? Thanks!

[AlGantori]

Here is the plunker you requested http://plnkr.co/edit/ps2YEfwdHhgC0YcU0lJ2?p=preview

It should render like this....

Please include something like this plunker into your regression test units, Thank You!

[danseracu]

Any news on this issue?

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/219