Add or remove handles dinamically

[marcoshier]

I've been trying to dynamically update the slider adding range sliders at the (click) event, but nothing seems to happen.

HTML

<nouislider (change)="sliderChangeSun($event)" [config]="configSliderSun"></nouislider>
<div (click)="addHandle()" class="add"></div>

TS

  configSliderSun: any = {
    start: [0, 15],
    connect: [false, true, false],
    range: {
      'min': 0,
      'max': 24
    }

addHandle() {
   this.configSliderSun.start.push(20, 35);
   this.configSliderSun.connect.push(false, true, false);
 }

What's wrong in the approach I'm using? The array gets updated according to console log, but the range slider doesn't update.

[ajaxsys]

hi do you fix this now?

[good-news-everyone]

Is there any solution?

[ajaxsys]

Unfortunately , this option is not support by updateOptions, so you need to slider.noUiSlider.destroy() and create a new one.

Ref doc: https://refreshless.com/nouislider/more/#section-update

[smasala]

Yea unfortunately the only solution we should was to stick the component inside a ngIf="showSlider" and rerender the component on-the-fly.

this.showSlider = false;
setTimeout(() => {
    this.showSlider = true;
    this.changeDetectorRef.detectChanges();      // Angular ChangeDetectorRef Service
});

[frischka]

I`m trying to implement a range slider with ng2-nouislider into a reactive form.

I also want to add or remove handles dynamically.

I have a reactive form in my project and it is not possible for me to change to a template driven one.

Here is my stackblitz for the ngmodel variant that works like I want:

https://stackblitz.com/edit/ng2-nouislider-with-form-8vbrt4?file=src/app/app.component.html

And here is the stackblitz for the reactive form variant:

https://stackblitz.com/edit/ng2-nouislider-with-form-g8zpq4?file=src/app/app.component.html

In this documentation it sais the nouislider component has to be destroyed to add new handles:

https://refreshless.com/nouislider/more/#section-update

But I tried it also without destroy via the destroy method of nouislider in the ngmodel variant and it worked also well. The destroy via the if condition seems to be enough.

My problem is in the reactive form variant. If you try this example and push the plus button, you can see, that the handle is added, but the forms value is not correct after the reinitialization of the slider in the dom.

The value seems to be only for a short time correct, and then the array loses the last value. In other words. If the value is [33,66] and should be [25,50,75] after the button click, the value is only very short correct, and the it is only [25,50].

It seems that the slider is not really destroyed and remembers the old array length of the start value. And after reinitialization it overrides the form value again.

So please.....

Is anybody able to help me here? I can not see any error in my code here. Thanks in advance =)