something weird is wrong with the slider. I want to change the value of the slider for another value that would be in the component where the slider is located. When using the input formatter, everything is fine, but when I use the "this.slider" it returns me undefined. since the formatter function when passing it through input loses its context. I leave an example for clarity

export class ConfigurationRulesListComponent implements OnInit {
  @ViewChild('slider', { static: false }) sliderComponent: NzSliderComponent;
  listOfValues: Array<string> = [];
  currentValue = 0;
  minValue = 0;
  maxValue = 0;
  stepMarks: Marks = {};

  constructor() {}

  ngOnInit() {
    this.getValuesFromBackend();
    this.init();
  }

  formatter(index: number): string {
    const marksFound: Marks = this.sliderComponent.nzMarks; // here undefine beccose, is other context
    const label = (marksFound[index] as MarkObj).label;
    const result = new RegExp(/(?<=<strong>\s*).*?(?=\s*<\/strong>)/);
    const matchResults = label.match(result);
    return `${matchResults[0]}`;
  }

  private init() {
    // para construir las marcas en caso de que tengan estilos determinados
    for (let i = 0; i < this.listOfValues.length; i++) {
      const newMark = new Marks();
      newMark[i] = {
        style: {
          color: '#f50'
        },
        label: `<strong>${this.listOfValues[i]}</strong>`
      };
      this.stepMarks = {
        ...this.stepMarks,
        ...newMark
      };
    }
  }

  private getValuesFromBackend() {
    //  adicionarle observables
    this.listOfValues = ['First', 'Second', 'Third', 'fourth', 'fifth', 'sixth'];
    this.currentValue = 0;
    this.minValue = 0;
    this.maxValue = this.listOfValues.length - 1;
  }
}

html>

<nz-slider
  #slider
  [nzMin]="minValue"
  [nzMax]="maxValue"
  [nzMarks]="stepMarks"
  [(ngModel)]="currentValue"
  [nzTipFormatter]="formatter"
></nz-slider>