tb / ng2-nouislider

Angular2 noUiSlider directive
http://tb.github.io/ng2-nouislider/
MIT License
184 stars 114 forks source link

Add or remove handles dinamically #184

Open marcoshier opened 6 years ago

marcoshier commented 6 years ago

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 commented 5 years ago

hi do you fix this now?

good-news-everyone commented 5 years ago

Is there any solution?

ajaxsys commented 5 years ago

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 commented 5 years ago

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 commented 3 years ago

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 =)