tb / ng2-nouislider

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

Error on using tooltips #142

Closed saranshchat closed 6 years ago

saranshchat commented 6 years ago

There is a button add interval which on clicking will add two handlers on the slider and also wanted to show the tooltip ion the handler so /i used the tooltip property as in documentation: <nouislider id="timeSlider" #slider [tooltips]="[true, true]" [config]="keyConfig" [(ngModel)]="timeInterval" (ngModelChange)="onChange(this, $event)"> <button class="btn" (click)="addInterval()">Add Interval

app.component : addInterval() { this.timeInterval.push(30); this.timeInterval.push(45); // this.keyConfig = { // behaviour: 'drag', // connect: this.connectArray, // step: 1, // margin: 0, // range: { // min: 0, // max: this.videoDuration // }, // pips: { // mode: 'count', // density: 3, // values: 5, // stepped: true // },

this.keyConfig.connect.push(true);
this.keyConfig.connect.push(false);
this.connectArray = this.keyConfig.connect;

//this.slider.slider.destroy();
this.flag = false;
this.cdRef.detectChanges();
this.flag = true;

} addInterval() { this.timeInterval.push(30); this.timeInterval.push(45); this.keyConfig.connect.push(true); this.keyConfig.connect.push(false); this.connectArray = this.keyConfig.connect; this.slider.slider.destroy(); this.flag = false; this.cdRef.detectChanges(); this.flag = true; }

On first compilation the slider is coming with two hanlders but when I click the button the slider gets destroy and following error displayued ERROR Error: noUiSlider (10.1.0): must pass a formatter for all handles. I have updated the keyConfig properties but this error is not resolved. Please help anyone as I got stuck into it

kiqq commented 6 years ago

html: [tooltips]="tooltips"

ts: tooltips = [true, true];

add to addInterval() to set new handles tooltips visibility to true: this.tooltips.push(true, true);

btw Beware that push adds at the end of array and added handles will not have lower value than the previous last one.

saranshchat commented 6 years ago

@kiqq thanks for help but still the error remains same. Actually I think it requires a formatter, and that I am not able to find. Can you suggest any other method

kiqq commented 6 years ago

Please check this out: https://stackblitz.com/edit/angular-w7blg1

saranshchat commented 6 years ago

@kiqq thanks for your help I declaredthe tooltips as the keyConfig property due to which exception occured. Thanks for your help.