nouislider noUI-connect class

[ramparvataneni]

1) I am using ng2-nouislider for multiple sliders in *ngFor, in a component by setting slider config for each one of them. Works fine.

trait.sliderConfig = { connect: [true, false], tooltips: [ { to: function(value) { let tooltip = value; if (tooltip === 0) { tooltip = 'Not yet scored'; } else { trait.scale.levelSetLevels.forEach(levelSetLevel => { if (levelSetLevel.rank === value) { tooltip = value + ' - ' + levelSetLevel.titleNav; } }); }

                            return tooltip;    // function to change based on value
                        },
                        from: function(value) {
                            return value;
                        }
                    }
                    ],
                    start: [ startVal ],
                    step: stepVal,
                    keyboard: true,
                    range: {
                        'min': minVal,
                        'max': maxVal
                    },
                };

<nouislider id="slider_{{trait.traitId}}" [disabled]="bIsDisabled" [config]="trait.sliderConfig" #slider [(ngModel)]="trait.score" (ngModelChange)="sliderOnChange(trait, domain)">

2) Also I am setting slider connect class based on ngModel change with drag or select, on ngModelChange event, this works fine too.

const connect = document.getElementById('slider_' + trait.traitId).querySelector('.noUi-connect'); if (trait.score <= trait.bandCount.bandExpectedMin) { trait.scaleLabel = trait.bandCount.bandLabelBelow; connect.classList.remove('band-3-color'); connect.classList.add('band-1-color'); }

3) My slider not initiating noUi-connect classes, based on existing values. I am not very sure when to run this process, ngAfterViewInit is not working. It says connect is null for below code in ngAfterViewInit.

const connect = document.getElementById('slider_' + trait.traitId).querySelectorAll('.noUi-connect');

I need to initiate slider with colors based on existing ngModel value, how do I do that.

[ramparvataneni]

Never mind, I was able to do initiate the connect class using (update) event.