How to set max vale for input range slide dynamically?

Question

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
  }
});

Answer 1

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

Answer 2

I'm a little late to the game, but they have an example here: https://angular-slider.github.io/ngx-slider/demos#dynamic-options-slider

Specifically this part:

// Due to change detection rules in Angular, we need to re-create the options object to apply the change
    const newOptions: Options = Object.assign({}, this.options);
    newOptions.ceil = newCeil;
    this.options = newOptions;