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 {}
連続スライダー
簡易な連続スライダーを使用します。最初に、isContinuous プロパティを true に設定し、スライダー タイプを指定します。次に、minValue および maxValue プロパティを設定し、最小値および最大値を定義します。また、スライダーの value をコンポーネントの "volume" プロパティにバインドします。
Note
連続スライダーは、現在の値に目盛りおよびバブル ラベルを表示しません。
<!--sample.component.html-->
<igx-slider id="slider" [minValue]="0" [maxValue]="100" [isContinuous]=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;
}
}
}
サンプルを構成した後、結果は以下のようになります。