Angular2 ng2-slider-componentのモデルとの結合

Question

私のアプリケーションでは、angular2（V2.1.1）を使用して開発された価格帯フィルタにng2-sliderを使用しました。スライダーが期待どおりに表示されます。私はhttps://github.com/Bogdan1975/ng2-slider-componentの指示に従った。 問題は、これらがこのスライダにバインドする変数であると言うものが見つかりませんでした。だから私はminとmaxの値にアクセスすることができませんスライダーを使用して変更されます。

Answer 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; 
} 

、文字列タイプを取ります。私はソースコードに見えた

Answer 2

：

あなたは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 
    } 
} 

Answer 3

を使用して、スライダーで変更されたすべての値にアクセスすることができます私はあなたがhttp://bogdan1975.github.io/slider/上でそれを見つけることができる答えを見つけました。

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> 

活字体：答えるため

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; 
}