angular 2 nouislider: How to recreate the slider?

Question

I need to change the number of handles on a slider. When googling it says I need to destroy and create the slider again.

Now it says here: Updating and reading slider options that:

To update any other option, destroy the slider using slider.noUiSlider.destroy() and create a new one. Note that events are not unbound when destroying a slider.

I was able to destroy the slider:

@ViewChild('slider') slider;

destroySlider() {
    this.slider.slider.destroy();
}

but I can't seem to find how to create the slider in angular.

Any help is appreciated.

Answer 1

You can wrap slider in EmbeddedView via *ngIf

component.html

<button (click)="reCreate()">Recreate slider</button>

<nouislider *ngIf="flag" #slider [config]="someKeyboardConfig"></nouislider>

and then reCreate function could look like:

component.ts

flag = true;

reCreate() {
  this.slider.slider.destroy();
  this.flag = false;
  this.cdRef.detectChanges();
  this.flag = true;
}

Plunker Example