To Get Min And Max updated Range Value in the tooltip

[DonaldsMC]

Hi All,

i am trying to change the tooltip label using tooltip property in the ng2-nouislider.

when both min handle and max handle range are collide(are in the same range). then i need to show the tooltip in the form of YYYY-YYYY. please refer below image for the reference.

So in tooltip in config, i am calling MyFormatter class as below

tooltips: [new MyFormatter(this._dataService), new MyFormatter(this._dataService), new MyFormatter(this._dataService)]

And in the MyFormatter class using "to" and "from" methods of NouiFormatter

export class MyFormatter implements NouiFormatter { to(value: number): string { let output = value + " Day"; if (value != 1) { output += "s";} return output; }

from(value: string): number { return Number(value.split(" ")[0]); } }

Here i need to get min and max range value so that i can check the condition and format the label. So could you please any one suggest how to get dragged(updated) min and max value here.

Thanks in advance.

[DonaldsMC]

@tb @gmazzamuto @ryan-morris @naeramarth7 @mattlewis92 any thoughts on above issue?

[kiqq]

<nouislider #slider [(ngModel)]="range" [config]="config"></nouislider>

  @ViewChild('slider', { read: ElementRef })
  private slider: ElementRef;
  config: any;
  range = [10, 20];
  private tooltip0: HTMLElement;
  private tooltip1: HTMLElement;
  private formatter0 = new MyFormatter3();
  private formatter1 = new MyFormatter3();

  constructor() { }

  ngOnInit() {
    this.config = {
      step: 1,
      start: 0,
      range: { min: 0, max: 100 },
      tooltips: [this.formatter0, this.formatter1]
    }
  }

  ngAfterViewInit() {
    let tooltips = this.slider.nativeElement.getElementsByClassName('noUi-tooltip');
    this.formatter0.otherTooltip = tooltips[1];
    this.formatter1.otherTooltip = tooltips[0];
  }

export class MyFormatter3 implements NouiFormatter {
  otherTooltip: HTMLElement;

  to(value: number): string {
    let result = value.toString();

    if (this.otherTooltip) {
      let otherHandle = this.from(this.otherTooltip.innerText);
      if (otherHandle == value) {
        result += "-" + result;
        this.otherTooltip.innerText = result;
      } else {
        this.otherTooltip.innerText = otherHandle.toString();
      }
    }
    return result;
  }

  from(value: string): number {
    return Number(value.split("-")[0]);
  }
}