Slider
Ignite UI for Angular Slider コンポーネントを使用すると、つまみをトラックで移動して指定した範囲内で値選択を許可します。トラックを連続またはステップに定義でき、単一または範囲によってスライダーのタイプを選択できます。
Slider デモ
Note
Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、すべての必要な依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。「インストール」のトピックで手順を参照できます。
使用方法
Ignite UI for Angular Slider を初期化する前に、IgxSliderModule を app.module.ts ファイルにインポートします。
// app.module.ts
...
import { IgxSliderModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxSliderModule],
...
})
export class AppModule {}
連続スライダー
Warning
isContinuous プロパティは非推奨になりました。代わりに continuous を使用してください。
簡易な連続スライダーを使用します。最初に、continuous プロパティを true に設定し、スライダー タイプを指定します。次に、minValue および maxValue プロパティを設定し、最小値および最大値を定義します。また、スライダーの value をコンポーネントの "volume" プロパティにバインドします。
注: 連続スライダーは、現在の値に目盛りおよびバブル ラベルを表示しません。
<!--sample.component.html-->
<igx-slider id="slider" [minValue]="0" [maxValue]="100" [continuous]=true [(ngModel)]="volume" ></igx-slider>
<label igxLabel for="slider">Volume: {{volume}}</label>
// sample.component.ts
// Set an initial value
public volume = 20;
サンプルの構成後、スライダーのつまみをドラッグするとラベルを更新しますが、スライダー値は指定した最小値および最大値の間に制限されます。
不連続スライダー
デフォルトで Ignite UI for Angular Slider は不連続です。不連続スライダーで現在値は数値ラベル (バブル) で可視化されます。
定義済みステップを持つ不連続スライダーを使用すると、有意な値のみを選択可能にすることができます。たとえば、不連続スライダーは 0 から 5 までの評価、または 0% から 100% までの進行状況を可視化できます。
次の例では、0% から 100% までの値を表示する不連続スライダーを定義します。step は 10 に設定されます。スライダーの value をコンポーネントの "completion" プロパティにバインドすると、入力コンポーネントと双方向バインディングを設定します。
<!--sample.component.html-->
<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
<div class="igx-form-group">
<input igxInput id="percentInput" type="text" [value]="task.completion / 100 | percent" (blur)="updateTask($event.target)" />
<label igxLabel for="percentInput">Task Completion</label>
</div>
// sample.component.ts
public task: Task = new Task(10);
updateTask(event) {
if (!isNaN(parseInt(event.value, 10))) {
this.task.completion = event.value;
} else {
event.value = this.task.completion;
}
}
...
class Task {
constructor (
public completion: number
) {
}
}
サンプルを構成した後、スライダーのつまみをドラッグすると入力値を更新し、入力値を変更するとスライダー値を更新します。
範囲スライダー
範囲フィルターなどを可視化する場合、範囲スライダーを使用します。スライダーの type を RANGE に設定します。次にスライダー値を PriceRange 型のオブジェクトにバインドします。そのオブジェクトに上限および下限のプロパティがあります。
<!--sample.component.html-->
<igx-slider [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(ngModel)]="priceRange"></igx-slider>
// sample.component.ts
public sliderType = SliderType;
public priceRange: PriceRange = new PriceRange(200, 800);
...
class PriceRange {
constructor(
public lower: number,
public upper: number,
) {
}
}
最大値および最小値に近い値が適切でない場合があります。minValue と maxValue の設定以外に、ユーザー選択を更に制限するための範囲も設定できます。これは、lowerBound および upperBound プロパティで設定します。この設定により、0 ～ 100 および 900 ～ 1000 の範囲でつまみを移動できなくなります。
<!--sample.component.html-->
<igx-slider [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(ngModel)]="priceRange" [lowerBound]="100" [upperBound]="900" ></igx-slider>
2 つの入力を追加し、スライダーの上限および下限にバインドします。このように、スライダー値を可視化して変更できます。
<!--sample.component.html-->
<div class="wrapper">
<div class="igx-form-group">
<input igxInput id="lowerInput" type="text" [ngModel]="priceRange.lower | currency" (blur)="updatePriceRange($event.target)" />
<label igxLabel for="lowerInput">Lower price:</label>
</div>
<div class="igx-form-group">
<input igxInput id="upperInput" type="text" [ngModel]="priceRange.upper | currency" (blur)="updatePriceRange($event.target)" />
<label igxLabel for="upperInput">Upper price:</label>
</div>
</div>
// sample.component.ts
public updatePriceRange(event) {
const prevPriceRange = this.priceRange;
switch (event.id) {
case "lowerInput": {
if (!isNaN(parseInt(event.value, 10))) {
this.priceRange = new PriceRange(event.value, prevPriceRange.upper);
}
break;
}
case "upperInput": {
if (!isNaN(parseInt(event.value, 10))) {
this.priceRange = new PriceRange(prevPriceRange.lower, event.value);
}
break;
}
}
}
サンプルを構成した後、結果は以下のようになります。
ラベル モード
ここまでで目盛りでのみ数値を表示しましたが、基本的な値の配列を使用することで、情報を提示するために使用できる別の方法があります。
Note
初期値の配列には少なくとも 2 つの値を含める必要があり、含めない場合は labelsView が有効になりません。
このルールに対応する定義ができたら、ラベルの入力プロパティに渡す準備ができました。これは、データをトラック全体に均等に分散させることによって処理します。ラベル値は、コレクション内で定義したすべての初期値を表します。それらは、lowerLabel または upperLabel のいずれかを要求することによって、API を通じていつでもアクセスできます。
Note
labelsView が有効になっているときは、maxValue、minValue、step の入力が制御されることに注意してください。
もう 1 つの重要な要素は、labelsView が有効になっているときにスライダーが更新プロセスを処理する方法です。
これは単にコレクションのインデックスで動作します。それぞれ、value、lowerBound および upperBound プロパティがフォロー/設定することでトラックを制御することを意味します (インデックス)。
<!--sample.component.html-->
<igx-slider #slider3 [type]="sliderType" [labels]="labels" [lowerBound]="1" [upperBound]="5">
<ng-template igxSliderThumbFrom let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.lower] }}</span>
</ng-template>
<ng-template igxSliderThumbTo let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.upper] }}</span>
</ng-template>
</igx-slider>
// sample.component.ts
public sliderType: SliderType = SliderType.RANGE;
public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
上記のサンプルからわかるように、境界の設定はまだ有効な操作です。lowerBound と upperBound に対応すると、スライドできる範囲が制限されます。
ラベルのテンプレート化
上記では、igxSliderThumbFrom ディレクティブと igxSliderThumbTo ディレクティブの両方を使用して、カスタム ラベル テンプレートを提供する方法を意図的に示しました。直感的に igxSliderThumbFrom は lowerLabelに対応し、igxSliderThumbTo は igxSliderThumbTo に対応すると想定できます。
ここでのコンテキストは、暗黙的に value input プロパティへの参照を、そして labelsView が有効な場合は明示的にラベル入力への参照を与えます。
<ng-template igxSliderThumbFrom let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.lower] }}</span>
</ng-template>
<ng-template igxSliderThumbTo let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.upper] }}</span>
</ng-template>
