I am using a 2-handle nouislider
. It works great but when I try to update the handle positions from the code, I keep getting the error: set is not a function. What am I missing?
//HTML
<nouislider #mrangeslider [connect]="true" [step]=".05"
[(ngModel)]="sliderMRangeSel" (change)="updateSliderM($event)"
[min]="sliderMBounds[0]"
[max]="sliderMBounds[1]">
</nouislider>
//in main module
import { NouisliderModule } from 'ng2-nouislider';
// in component
@ViewChild("mrangeslider") mSliderEl : ElementRef;
sliderMBounds = [1,2];
sliderMRangeSel = [1.25,1.75];
...
this.sliderMRangeSel = [1.25,1.75];
this.mSliderEl.set(this.sliderMRangeSel); // trying to update the handles
In browser too I get the same:
> this.mSliderEl.set([1.25,1.75])
VM492:1 Uncaught TypeError: this.mSliderEl.set is not a function
// but there is a `set` property defined, no observers
> this.mSliderEl.set
EventEmitter {_isScalar: false, observers: Array(0), closed: false,
isStopped: false, hasError: false, …}
Obviously I have missed some step. I am using nouislider
v13.1.0 with angular
v7.1.0 running on chrome browser Windows 10.
Thanks
Since the template reference variable #mrangeslider
is set on the slider component, the default value given by @ViewChild()
is the NouisliderComponent
class instance. I assume that this is what you want. With it, you can access the slider properties and methods. If needed, you could get a reference to the component HTML host element by setting the read
property to ElementRef
:
@ViewChild("mrangeslider") mSliderComp: NouisliderComponent;
@ViewChild("mrangeslider", { read: ElementRef }) mSliderEl: ElementRef;
That being said, since sliderMRangeSel
is bound with [(ngModel)]
, the component should adjust automatically when changing the range values, without having to call a method of the component.
setSliderRange() {
// The slider will adjust after selecting the range
this.sliderMRangeSel = [1.15, 1.9];
}
See this stackblitz for a demo.