id 属性の値を設定する @Input プロパティ。
提供されていない場合、自動的に生成されます。
<igx-slider [id]="'igx-slider-32'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
このイベントは、ユーザーがつまみ操作を中止して値が変更されたときに発生されます。
public change(event){
alert("The value has been changed!");
}
<igx-slider (onValueChange)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
つまみのラベルの表示期間を設定する @Input プロパティ。デフォルト値は 750 ミリ秒です。
<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5">
IgxThumbFromTemplateDirective および IgxThumbToTemplateDirective テンプレートに対応するテンプレートコンテキストを返します。
IgxSliderComponent が連続として設定されているかどうかを返します。
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let continuous = this.slider.continuous;
}
IgxSliderComponent を連続としてて設定する @Input プロパティ。 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;
}
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;
}
ラベルが有効かどうかを返します。 labels が設定されていると、ビューは自動的にアクティブになります。
@ViewChild("slider")
public slider: IgxSliderComponent;
let labelView = this.slider.labelsViewEnabled;
IgxSliderComponent の下限を返します。
@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;
IgxSliderComponent の下値を返します。
@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
let sliderLowValue = this.slider.lowerValue;
}
IgxSliderComponent の下値を設定します。
@ViewChild("slider2")
public slider: IgxSliderComponent;
public lowValue(event){
this.slider.lowerValue = 120;
}
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">
Returns the incremental/decremental dragging step of the IgxSliderComponent.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let step = this.slider.step;
}
つまみドラッグ時の値を増加/減少する段階を設定する @Input プロパティ。 デフォルトの段階は 1 です。段階を 0 以下に設定しないでください。
<igx-slider #slider [(ngModel)]="task.percentCompleted" [step]="5">
IgxSliderComponent のタイプを取得する @Input プロパティ。スライダーを SliderType.SLIDER (デフォルト値) または SliderType.RANGE に設定できます。
`typescript
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let type = this.slider.type;
}
An @Input property that sets the type of the IgxSliderComponent. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.
sliderType: SliderType = SliderType.RANGE;
<igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
IgxSliderComponent の上限を返します。
@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;
IgxSliderComponent の上値を返します。
@ViewChild("slider2")
public slider: IgxSliderComponent;
public upperValue(event){
let upperValue = this.slider.upperValue;
}
IgxSliderComponent の上値を設定します。
@ViewChild("slider2")
public slider: IgxSliderComponent;
public upperValue(event){
this.slider.upperValue = 120;
}
スライダーの値を返します。スライダーのタイプが SliderType.SLIDER の場合、返された値は数値です。 スライダーのタイプが SliderType.RANGE の場合、戻り値は lowerValue と upperValue のオブジェクトを表します。
@ViewChild("slider2")
public slider: IgxSliderComponent;
public sliderValue(event){
let sliderVal = this.slider.value;
}
スライダーの値を設定します。 スライダーのタイプが SliderType.SLIDER の場合、引数は数値です。デフォルトで value は lowerBound を取得します。 スライダー タイプが SliderType.RANGE の場合、引数は lowerValue および upperValue プロパティのオブジェクトを表します。 デフォルトでは、オブジェクトは lowerBound および upperBound プロパティ値に関連付けられています。
rangeValue = {
lower: 30,
upper: 60
};
<igx-slider [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="56" [maxValue]="256">
Ignite UI for Angular Slider - ヘルプ
Ignite UI Slider を使用すると、つまみをトラックで移動して指定した範囲内で値選択を許可します。 トラックを連続またはステップに定義でき、単一または範囲によってスライダーのタイプを選択できます。 例:
<igx-slider id="slider" [minValue]="0" [maxValue]="100" [continuous]=true [(ngModel)]="volume"> </igx-slider>