Ticks on ion-range are not updated after update MIN and MAX values of range

Original issue by @nguyentk90 on 2018-03-20T15:04:32Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: When we set [step]="1" and [snaps]="true", we will see the ticks on range of control. But when we update [min], [max] of range, these ticks are not updated (not render again).

Initial ticks and after updated

Expected behavior: The ticks should be rendered again with new value of [min], [max].

Expected ticks

Steps to reproduce: Use ion-range with [step], [snaps], [min] and [max] attributes.

Related code:

<ion-range [min]="MIN" [max]="MAX" [step]="1" snaps="true" color="secondary" [(ngModel)]="singleValue"></ion-range>

<button (click)="updateRange()">Update Range</button>

In ts side:

// initial we will see 10 ticks on range
MIN = 1;
MAX = 10;

updateRange() {
   this.MIN = 1;
   this.MAX = 15;
  // after update, we should see 15 ticks on range
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\nguye\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 3.1.6
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.1
    npm  : 5.6.0
    OS   : Windows 10

Misc:

    backend : legacy

ionic-team / ionic-v3

Ticks on ion-range are not updated after update MIN and MAX values of range #600