when max is a var lag + can't slide apart for interval

[tatsujb]

  <ion-range-slider class="slider" #sliderElement
                    type="double"
                    min="0"
                    [max]="max"
                    from="0"
                    to="250"
                    [min_interval]="150"
                    [max_interval]="700"
                    from_shadow="true"
                    to_shadow="true"
                    grid="true"
                    drag_interval="true"
                    decorate_both="false"
                    (onFinish)="myOnFinish($event.from , $event.to)">
  </ion-range-slider>

I have this setup. with a hard coded max value (max="9000") I can slide min, max and interval.

when max is a var like above all three default to the interval I can't widen the gap sometimes I can decrease it and there is a substantial amount of lag.

Windows 10 pro 64bit
Chrome Version 64.0.3282.167 (Official Build) (64-bit) node: v8.9.4 npm: 5.6.0

package.json :

{
  "name": "web.ui",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "parcel": "parcel",
    "start": "ng serve",
    "build": "ng b -prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "yarn": "node node_modules/yarn/bin/yarn.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.3",
    "@angular/common": "^5.2.3",
    "@angular/compiler": "^5.2.3",
    "@angular/core": "^5.2.3",
    "@angular/forms": "^5.2.3",
    "@angular/http": "^5.2.3",
    "@angular/platform-browser": "^5.2.3",
    "@angular/platform-browser-dynamic": "^5.2.3",
    "@angular/router": "^5.2.3",
    "angular-font-awesome": "^3.1.2",
    "core-js": "^2.5.3",
    "exitzero": "^1.0.1",
    "font-awesome": "^4.7.0",
    "ng2-ion-range-slider": "^1.0.3",
    "parcel-plugin-inlinesvg": "0.0.12",
    "rxjs": "^5.5.6",
    "typeface-comfortaa": "0.0.54",
    "web-animations-js": "^2.3.1",
    "yarn": "^1.3.2",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "^5.2.3",
    "@angular/language-service": "^5.2.3",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~9.4.0",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~3.0.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "parcel-bundler": "^1.5.1",
    "parcel-plugin-angular": "0.5.1-next.13",
    "parcel-plugin-typescript": "^0.6.0",
    "postcss-modules": "^1.1.0",
    "protractor": "~5.3.0",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.7.0"
  }
}

[tatsujb]

ok so even if having a unitiated value seems to work because it defaults to "to" until hydrated by the observable it actually causes an issue. simply initiate your "max" value at the same number as your "to" this way it mimicks the behavior of the table/dataset being hydrated under your eyes but doesn't suffer from the above bug.

[tatsujb]

actually no. false impression I get the bug anyways. basically as soon as the var that is going to be passed to ng2-ion-range-slider is so much as touched near or far by an observable, ng2-ion-range-slider craps out.

since I'm new to this is there a way to have a var with a one-time only update?

I tried :

if(this.init){
     this.max = data.length;
     this.init = false;
}

to no avail. it seems there's a sort of "contamination" of observables to other vars they touch?

[tatsujb]

alright so it's as dumb as bricks but the solution was :

<ion-range-slider *ngIf="max" #sliderElement
                      type="double"
                      [min]="min"
                      [max]="max"
                      [from]="from"
                      [to]="to"
                      [min_interval]="min_interval"
                      [max_interval]="max_interval"
                      grid="true"
                      drag_interval="true"
                      (onFinish)="myOnFinish($event.from , $event.to)">
</ion-range-slider>

yes it's as dumb as *ngIf="max" when using an observable there will be a millisecond where it's value is "undefined" (which will not even register if watching the value with console.log) even if the value was previously instantiated and one such value will partially crash this plugin.