このイベントは、各スライド操作の終了時に発生します。
public change(event){
alert("The value has been changed!");
}
<igx-slider (dragFinished)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
id 属性の値を設定します。
提供されていない場合は、自動的に生成されます。
<igx-slider [id]="'igx-slider-32'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
このイベントは、範囲スライダーの低い値が変更されるたびに発生します。
public change(value){
alert(`The lower value has been changed to ${value}`);
}
<igx-slider [(lowerValue)]="model.lowervalue" (lowerValueChange)="change($event)" [step]="5">
プライマリ目盛りラベルを表示/非表示します。
<igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider>
セカンダリ目盛りラベルを表示/非表示します。
<igx-slider [secondaryTicks]="5" [secondaryTickLabels]="false"></igx-slider>
スライダー目盛りを表示/非表示します。
<igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier>
つまみラベルの表示期間を設定します。デフォルト値は 750 ミリ秒です。
<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5">
目盛りラベルの回転を変更します。 horizontal - デフォルトの回転。 toptobottom - 目盛りラベルを垂直に 90 度回転します。 bottomtotop - 目盛りラベルを垂直に -90 度回転します。
<igx-slider [primaryTicks]="5" [secondaryTicks]="3" [tickLabelsOrientation]="tickLabelsOrientaiton"></igx-slider>
目盛りの方向を変更します。 bottom - Tフォルトの方向、スライダー トラックの下。 top - スライダー トラックの上。 mirror - 上下の方向を組み合わせます。
<igx-slider [primaryTicks]="5" [ticksOrientation]="ticksOrientation"></igx-slider>
このイベントは、範囲スライダーの高い値が変更されるたびに発生します。
public change(value){
alert(`The upper value has been changed to ${value}`);
}
<igx-slider [(upperValue)]="model.uppervalue" (upperValueChange)="change($event)" [step]="5">
このイベントは、値が変更されたときに発生されます。
public change(event){
alert("The value has been changed!");
}
<igx-slider (valueChange)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
IgxThumbFromTemplateDirective および IgxThumbToTemplateDirective テンプレートに対応するテンプレートコンテキストを返します。
return {
$implicit // ラベルの値を返します。
labels // ユーザーが渡したラベル コレクションを返します。
}
IgxSliderComponent が連続として設定されているかどうかを返します。
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let continuous = this.slider.continuous;
}
IgxSliderComponent を continuous (連続) として設定します。 デフォルトで IgxSliderComponent は discrete (不連続) です。 不連続 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;
}
コンポーネントを無効にします。
<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;
IgxSliderComponent の低い値を返します。
@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
let sliderLowValue = this.slider.lowerValue;
}
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;
}
つまみをドラッグした時の、値を増減するステップ数を設定します。 デフォルトのステップ数は 1 です。ステップ数は 0 以下に設定しないでください。
<igx-slider #slider [(ngModel)]="task.percentCompleted" [step]="5">
IgxSliderComponent のタイプを取得します。
スライダーを IgxSliderType.SLIDER (デフォルト値) または IgxSliderType.RANGE に設定できます。
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let type = this.slider.type;
}
IgxSliderComponent のタイプを設定します。
スライダーを 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">
Ignite UI for Angular Slider - ヘルプ
Ignite UI Slider を使用すると、つまみをトラックで移動して指定した範囲内で値選択を許可します。 トラックを連続またはステップに定義でき、単一または範囲によってスライダーのタイプを選択できます。
例: