IgxThumbFromTemplateDirective および IgxThumbToTemplateDirective テンプレートに対応するテンプレートコンテキストを返します。

return {
 $implicit // ラベルの値を返します。
 labels // ユーザーが渡したラベル コレクションを返します。
}

IgxSliderComponent が連続として設定されているかどうかを返します。

@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let continuous = this.slider.continuous;
}

Input

IgxSliderComponent を連続として設定する @Input プロパティ。 デフォルトで IgxSliderComponent は不連続です。 不連続 IgxSliderComponent スライダーには、トラック上にステップ インジケーターがあり、操作中に表示されるつまみラベルがあります。 連続 IgxSliderComponent には目盛がなく、値にバブル ラベルを表示しません。

<igx-slider #slider [continuous]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">

IgxSliderComponent が無効かどうかを返します。

@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let isDisabled = this.slider.disabled;
}

Input

UI 操作を無効または有効にする @Input プロパティ。

<igx-slider #slider [disabled]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">

IgxSliderComponent の type が RANGE かどうかを返します。

 @ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderRange = this.slider.isRange;
}

複数の要素を持つプリミティブ値のコレクションを受け入れることによって、labelView を有効にします。 各要素はスライダー上に均等に広がり、サムラベルとして機能します。 プロパティが設定されると、maxValue、minValue、step よりも優先されます。 つまり、これらのプロパティに対する操作は許可されません。

ラベルが有効かどうかを返します。 labels が設定されていると、ビューは自動的にアクティブになります。

@ViewChild("slider")
public slider: IgxSliderComponent;
let labelView = this.slider.labelsViewEnabled;

IgxSliderComponent の設定可能な値の下限を返します。 設定されていない場合、minValue を返します。

@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderLowBound = this.slider.lowerBound;
}

IgxSliderComponent の設定可能な値の下限を設定します。 設定しない場合は、最小値と同じです。

<igx-slider [step]="5" [lowerBound]="20">

下位ラベルに対応する値を返します。

@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.lowerLabel;

RANGE IgxSliderComponent の低い値を返します。

@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
   let sliderLowValue = this.slider.lowerValue;
}

RANGE IgxSliderComponent の低い値を設定します。

@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
   this.slider.lowerValue = value;
}

IgxSliderComponent に表示される最大トラック値を返します。

@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderMax = this.slider.maxValue;
}

IgxSliderComponent に表示される最大トラック値を設定します。 デフォルトの最大値は 100 です。

<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">

IgxSliderComponent に表示される最小トラック値を返します。

 @ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderMin = this.slider.minValue;
}

IgxSliderComponent に表示される最小トラック値を設定します。 デフォルトの最小値は 0 です。

<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">

提示されたプライマリ目盛りの数を返します。

const primaryTicks = this.slider.primaryTicks;

プライマリ目盛りの数を設定します。@labels が有効になっている場合、このプロパティは機能しません。 代わりに、showTicks プロパティで目盛りを有効にします。

this.slider.primaryTicks = 5;

提示されたセカンダリ目盛りの数を返します。

const secondaryTicks = this.slider.secondaryTicks;

セカンダリ目盛りの数を設定します。labels が有効になっている場合でも、 プロパティは機能しますが、すべてのセカンダリ目盛りには目盛りラベルが表示されません。

this.slider.secondaryTicks = 5;

IgxSliderComponent の増分/減分ドラッグ ステップを返します。

@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let step = this.slider.step;
}

Input

つまみドラッグ時の値を増加/減少する段階を設定する @Input プロパティ。 デフォルトの段階は 1 です。段階を 0 以下に設定しないでください。

<igx-slider #slider [(ngModel)]="task.percentCompleted" [step]="5">

Input

IgxSliderComponent のタイプを取得する @Input プロパティ。 スライダーを IgxSliderType.SLIDER (デフォルト値) または IgxSliderType.RANGE に設定できます。

@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let type = this.slider.type;
}

Input

IgxSliderComponent のタイプを設定する @Input プロパティ。 スライダーを IgxSliderType.SLIDER (デフォルト値) または IgxSliderType.RANGE に設定できます。

sliderType: IgxSliderType = IgxSliderType.RANGE;

<igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">

IgxSliderComponent の設定可能な値の上限を返します。 設定されていない場合、maxValue を返します。

@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
   let sliderUpBound = this.slider.upperBound;
}

IgxSliderComponent の上限を設定します。 設定しない場合は、最大値と同じです。

<igx-slider [step]="5" [upperBound]="20">

上位ラベルに対応する値を返します。

@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.upperLabel;

RANGE IgxSliderComponent の高い値を返します。 SLIDER IgxSliderComponent の value を返します。

 @ViewChild("slider2")
public slider: IgxSliderComponent;
public upperValue(event){
    let upperValue = this.slider.upperValue;
}

RANGE IgxSliderComponent の高い値を設定します。

 @ViewChild("slider2")
public slider: IgxSliderComponent;
public upperValue(event){
    this.slider.upperValue = value;
}

スライダーの値を返します。スライダーのタイプが IgxSliderType.SLIDER の場合、返された値は数値です。 スライダーが IgxSliderType.RANGE の場合、 戻り値は lowerValue と upperValue のオブジェクトを表します。

@ViewChild("slider2")
public slider: IgxSliderComponent;
public sliderValue(event){
    let sliderVal = this.slider.value;
}

スライダーの値を設定します。 スライダーのタイプが IgxSliderType.SLIDER の場合、引数は数値です。 デフォルトで value は lowerBound を取得します。 スライダー タイプが IgxSliderType.RANGE の場合、 引数は lowerValue および upperValue プロパティのオブジェクトを表します。 デフォルトでは、オブジェクトは lowerBound および upperBound プロパティ値に関連付けられています。

rangeValue = {
  lower: 30,
  upper: 60
};

<igx-slider [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="56" [maxValue]="256">