Formatter support is not working

Issue 1:

Use case: a date slider (data model is UNIX time in milliseconds)

<nouislider style="margin: 80px;"
                   (change)="change()"
                   [min]="1483228800000"
                   [max]="1485820800000"
                   [step]="3600000"
                   [(ngModel)]="model"
                   [format]="formatter"
                   [tooltips]="true"></nouislider>

model: number =  1484611200000;

formatter: NouiFormatter = {

  from(value: string): number {
    console.log('from', value);
    return Date.parse(value);
  },

  to(value: number): string {
    console.log('to', value);
    return new Date(value).toISOString();
  }

};

change(): void {
  console.log(this.model);
}

This example is not working.

Very odd: If you change model: number = 1484611200000 to model: string = '2017-01-17T00:00:00', then the slider seems to be working but the model will not be updated.

Issue 2:

<nouislider style="margin: 80px;"
                   (change)="change()"
                   [min]="0"
                   [max]="9"
                   [step]="3"
                   [(ngModel)]="model"
                   [format]="formatter"
                   [tooltips]="true"></nouislider>

model: number =  6;

formatter: NouiFormatter = {

  from(value: string): number {
    console.log('from', value);
    return Number(value);
  },

  to(value: number): string {
    console.log('to', value);
    return '#' + value;
  }

};

change(): void {
  console.log(this.model);
}

In this example the model will not be updated. The from() method is called once with a number value (the model value) and will be never called with a string value. The correct from() method should be:

from(value: string): number {
  console.log('from', value);
  return Number(value.slice(1,2));
}

but this is not working.

[Martin-Luft]

@tb this works:

<nouislider style="width: 400px;"
                   [config]="config"
                   (change)="change()"
                   [(ngModel)]="model"></nouislider>

  model: number =  6;

  config: any = {
    range: {
      min: 0,
      max: 9
    },
    tooltips: {

      from(value: string): number {
        console.log('from', value);
        return Number(value.slice(1, 2));
      },

      to(value: number): string {
        console.log('to', value);
        return '#' + value;
      }

    },
    step: 3
  };

  change(): void {
    console.log(this.model);
  }

[Martin-Luft]

@nourhansaied I tested my code from above (https://github.com/tb/ng2-nouislider/issues/50#issuecomment-274765222) with Angular 5.2.10, ng2-nouislider 1.7.7, nouislider 11.1.0 and typescript 2.8.3 and it still works as expected…