Start and end handles not updating when ngModel changes

Hi,

I’m experiencing strange behaviour when using dynamic values for the ngModel. When the values of ngModel change, it changes them in the slider, but right after it changes them back to the initial values.

Because the values in the ngModel are dynamic for me, and are not defined right away, I manually initialize it with [ 0, 1 ]. This works and the slider gets updated. However, when I update these to [1950, 2017] it updates the slider, but instantly sets it back to [0,1].

The [min] and [max] are working fine for me, they are updated at the same time as the ngModel.

So I don’t know If I’m completely messing something up. Anyway, I’ve found a (temporary) solution that seems to work just fine for me. Maybe this helps to highlight what I’m struggling with at the moment.

I’ve updated ngOnChanges as such:

ngOnChanges(changes: any) {
    if (this.slider && (changes.min || changes.max || changes.step)) {
        setTimeout(() => {
            this.slider.updateOptions({
                range: {
                    min: this.min,
                    max: this.max
                },
                step: this.step
            });
        });
    }

    if(this.slider && changes.ngModel) {
        setTimeout(() => {
            this.slider.set(this.ngModel);
        });
    }
}

I’ve also updated the [(ngModel)] attribute to [ngModel] and that seems to fix the problem. I manually catch any changes through (change).

Without these changes, the values in my view will be the correct ones, but the slider will have both handles at the beginning. I don’t know if this helps to clarify what I’m doing (or doing wrong), but if you have any questions, I’m more than happy to answer them.

[ClientsideDesign]

@roelofjan-elsinga I was having a similar problem generating sliders dynamically with ngFor, but having all config in an object in my .ts file rather than inline seems to have solved the issue. All my ngmodel values are stored in an object under the corresponding node name, so the template code is just:

<nouislider [config]="sliderConfig[node.name]" (ngModel)="slider_ngModel[node.name]"></nouislider>

Then in my .ts file:

slider_ngModel = {};

and

sliderConfig: any = { slider_1_name: { connect: true, start: [20, 220], step: 1, tooltips:true, range: { min: 20, max: 220 }, }, slider_2_name: { connect: true, start: [1900, 2018], step: 1, tooltips:true, range: { min: 1900, max: 2018 } } };

Hope that helps.

[Suyashjc]

slider_ngModel[node.name]

I have a very large array list hard coding sliderConfig will be difficult. Is there any other way?