Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getting NaN on minimum price or maximum

See original GitHub issue

I’m always getting NaN on minimum price and maximum, If the tow value s comes from a HTTP response. Maybe I should show the value asynchronsly any way.

This my component:

export class PriceFilterComponent implements OnChanges {
    @Input() floor;
    @Input() ceil;
    @Output() eventEmitterFilter = new EventEmitter<{}>();
    min: any;
    max: any;

    options: Options;

    ngOnChanges() {
        console.log(this.max); //undifined then NaN
        if (this.floor && this.ceil) {
            console.log(this.max); // NAN
            this.max = Number(this.ceil.toFixed(0)) || 0;
            this.min = Number(this.floor.toFixed(0)) || 0;

            this.options = {
                floor: this.floor,
                ceil: this.ceil,
                showSelectionBar: true,
                selectionBarGradient: {
                    from: 'white',
                    to: '#007bff'
                },
                showOuterSelectionBars: true,
                translate: (value: number, label: LabelType): string => {
                    return value + '€';
                }
            };
        }
    }

    filter() {
        this.eventEmitterFilter.emit({'ceil': this.max, 'floor': this.min});
    }
}

This is the html side:<ng5-slider class="custom-slider" [(value)]="min" [(highValue)]="max" [options]="options" ></ng5-slider> This a link for a deployed app Online demo, and the part of code source could be found here.https://github.com/ahmed-bhs/angular6-demo/blob/master/src/app/article/price-filter/price-filter.component.ts