Change limit dynamically

[tb]

Change limit dynamically

[IgorceJovanoski]

Hey,
just a a shout for changing dynamically the range for angular2 or higher, I used the advices with the view child and update options tl;dr;
front:
<nouislider [connect]="true" [step]="1" [min]="modelMonthlyCost.min" [max]="modelMonthlyCost.max" [(ngModel)]="monthlyCostRange" [ngModelOptions]="{standalone: true}" (change)="changeMonthlyCost()" #monthlyCostSlider></nouislider>

back:
@ViewChild('monthlyCostSlider') public monthlyCostSlider: NouisliderComponent
.
.
.
this.monthlyCostRange = [+newModelMonthlyCost.min, +newModelMonthlyCost.max];
if (this.monthlyCostSlider.slider) this.monthlyCostSlider.slider.updateOptions({ start: [+newModelMonthlyCost.min, +newModelMonthlyCost.max], range: { min: +newModelMonthlyCost.min, max: +newModelMonthlyCost.max } });

Hope it helps, works for me

[olehtalanov]

You can do like this:
this.priceSliderRef.slider.set([+valueToSet1, +valueToSet2]);

[tb]

@smikey It will require adding https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html and using https://refreshless.com/nouislider/more/#section-update Can you do PR with it?

[jovanialferez]

see my comment here: #55

[davejohncole]

I have hit the same limitation with this component, but as I have just started using angular so do not have the skills necessary to fix this myself.

Looking at the documentation here https://refreshless.com/nouislider/more/ it appears that the wrapped control supports the capability.

[adityaitsrkr]

Hi Talanoff
Can you pls post ur code.
How r u getting the nouislider objects.
Like update option.
Can you pls help

[adityaitsrkr]

I got it working. Thank you