Angular2 ng2滑块组件与模型绑定

我在我的应用程序中使用ng2滑块作为价格范围过滤器，该应用程序是使用angular2（V2.1.1）开发的。它按预期显示滑块。我听从了老师的指示。

---

问题是，我找不到任何说明这些是要与滑块绑定的变量的内容。因此，我无法访问使用滑块更改的最小值和最大值

min、max、value、startValue和endValue都是滑块组件的默认变量。您只需要定义相关变量，并将它们分配给滑块组件的相应默认变量

 <ng2-slider 
        min="myMinVal"
        max="myMaxValue"
        value="myCurrentvalue">

 </ng2-slider>

 export class App{
     myMinVal:number=0;
     myMaxValue:number=100;
     myCurrentValue:number:30;
 }

导出类应用程序{
myMinVal:number=0；
myMaxValue:number=100；
myCurrentValue:编号：30；
}

---

如果number数据类型不起作用，请使用string类型，因为我不知道哪种数据类型起作用。

我刚刚查看了源代码：

您可以使用

onRangeChange

事件访问滑块更改的所有值

<ng2-slider min="3"
    max="33"
    value="7"
    stepValue="1"
    (onRangeChanged)="onRangeChange">
</ng2-slider>


export class MyComponent{

   onRangeChange(data){
      //data.max
      //data.min
      //data.startValue
      //data.endValue
   }
}

导出类MyComponent{
onRangeChange（数据）{
//data.max
//data.min
//data.startValue
//data.endValue
}
}

我找到了答案，你们可以在上面找到

HTML:

<ng2-slider
        #range
        min="6"
        max="23"
        startValue="9"
        endValue="21"
        (onRangeChanged)="rangeValueChanged($event, 'range-1-start', 'range_1_end')">
</ng2-slider>
<p class="value-box">
    Values: <span class="value-span" id="range-1-start">9</span> - <span class="value-span" id="range-1-end">21</span>
</p>

---

感谢@micronyks的回答。我试过你上面的建议。但是没有人能工作。myMinVal、myMaxValue和myCurrentvalue一旦定义就不会改变。谢谢@Bougarfaoui的回答。我读过onRangeChange，但这个函数从未在滑动时调用过。哦，好的，问题出在模块本身

rangeValueChanged(event, start:any, end:any) {
    var start_el = this.getElement(start);
    var end_el = this.getElement(end);
    start_el.innerText = event.startValue;
    end_el.innerText = event.endValue;
}

getElement(data){
    if (typeof(data)=='string') {
        return document.getElementById(data);
    }
    if (typeof(data)=='object' && data instanceof Element) {
        return data;
    }
    return null;
}