How to set max vale for input range slide dynamically?-CodePudding

I'm trying to do and input range slide with @angular-slider/ngx-slider following this examples and the official documentation and works well.

My component code is:

import { Options } from '@angular-slider/ngx-slider';

...
low_area_value: number = 1000;
high_area_value: number = 99999;
options: Options = {
  floor: 0,
  ceil: 9999
};
...

My template code is:

<ngx-slider formControlName="area" [(value)]="low_area_value" [(highValue)]="high_area_value" [options]="options"></ngx-slider>

I would like to set ceil dynamically depende on max area value of objects and get the error.

ERROR Error: floor and ceil options must be supplied

Set ceil dynamically code:

this.plotService.getMaxArea().subscribe(result => {
  this.high_area_value = result.area;
  this.options = {
    floor: 0,
    ceil: result.area
  }
});

Anybody could help me please ? Thanks in a advance.

CodePudding user response：

I think the issue that you are getting is due to result.area not being a number.

Just for testing purposes edit it and add a random value like this

this.plotService.getMaxArea().subscribe(result => {
  const rand = Math.floor(Math.random() * (100 - 5   1))   3;
  this.high_area_value = randomNumber;
  this.options = {
    floor: 0,
    ceil: randomNumber
  }
});

If this works, it means the value in result.area is not a number, maybe a string? That you might have to convert to a number