Slider 概要と構成

Ignite UI for Angular Slider コンポーネントを使用すると、つまみをトラックで移動して指定した範囲内で値選択を許可します。トラックを連続またはステップに定義でき、単一または範囲によってスライダーのタイプを選択できます。

Angular Slider の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 StackBlitz で表示

使用方法

Warning

このコンポーネントでは、タッチ操作が正しく動作するために、アプリケーションのルート モジュールに HammerModule をインポートする必要があります。.

Slider コンポーネントを初期化するには、IgxSliderModule を app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxSliderModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxSliderModule],
    ...
})
export class AppModule {}

範囲スライダー

デフォルトで Slider コンポーネントは不連続タイプに設定されています。不連続スライダーで現在値は数値ラベル (バブル) で可視化されます。バブルは常に表示されているか、スライダーのつまみにカーソルを合わせると表示されます。 定義済みステップを持つ不連続スライダーを使用すると、有意な値のみを選択可能にすることができます。

以下の例では、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" (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
  ) {
  }
}

2 つのコンポーネント間の双方向データ バインディングが表示されます。

codesandbox で表示 stackblitz で表示

連続スライダー

最初に、continuous 入力を true に設定し、スライダー タイプを指定します。次に、minValue および maxValue プロパティを設定し、最小値および最大値を定義します。

Note

連続スライダーには、トラック上にステップ インジケーターがなく、操作中に表示されるつまみラベルがありません。

<!--sample.component.html-->

<igx-slider 
    id="slider" 
    [minValue]="0" 
    [maxValue]="100" 
    [continuous]=true 
    [(ngModel)]="volume">
    </igx-slider>
<label igxLabel for="slider">Volume: {{volume}}</label>

また、スライダーの value をコンポーネントの 「volume」 プロパティにバインドします。

// sample.component.ts 

// Set an initial value
public volume = 20;

サンプルの構成後、スライダーのつまみをドラッグするとラベルを更新しますが、スライダー値は指定した最小値および最大値の間に制限されます。

codesandbox で表示 stackblitz で表示

範囲スライダー

最初に、スライダーの 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,
  ) {
  }
}

codesandbox で表示 stackblitz で表示

最大値および最小値に近い値が適切でない場合があります。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>

codesandbox で表示 stackblitz で表示

ラベル モード

ここまでで目盛りでのみ数値を表示しましたが、基本的な値の配列を使用することで、情報を提示するために使用できる別の方法があります。

Note

初期値の配列には少なくとも 2 つの値を含める必要があり、含めない場合は labelsView が有効になりません。

このルールに対応する定義ができたら、labels 入力プロパティに渡す準備ができました。これは、データをトラック全体に均等に分散させることによって処理します。ラベル値は、コレクション内で定義したすべての初期値を表します。それらは、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'];

codesandbox で表示 StackBlitz で表示

上記のサンプルからわかるように、境界の設定はまだ有効な操作です。lowerBound と upperBound に対応すると、スライドできる範囲が制限されます。

ラベルのテンプレート化

上記では、igxSliderThumbFrom ディレクティブと igxSliderThumbTo ディレクティブの両方を使用して、カスタム label テンプレートを提供する方法を意図的に示しました。直感的に igxSliderThumbFrom は lowerLabelに対応し、igxSliderThumbTo は igxSliderThumbTo に対応すると想定できます。
ここでの context は、暗黙的に value 入力プロパティへの参照を、そして labelsView が有効な場合は明示的に labels 入力への参照を与えます。

  <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>

Slider 目盛りとラベル

Slider 目盛りは、特定の時間枠、曜日など、データ可視化を簡単に行うことができます。この新しい機能は、データの表示範囲を確認するための Angular Slider の操作が必要なくなります。目盛りと目盛り ラベルの配置と方向の制御に関して、高い柔軟性があります。目盛りのオン/オフを切り替えたり、プライマリ、セカンダリ、またはその両方を選択したりできます。さらに、この機能は、プライマリ目盛りラベル、セカンダリ目盛りラベル、またはその両方をオン/オフにする方法を提供します。目盛りラベルは水平から垂直 (上から下 (90) または下から上 (-90)) に向きを変更することもできます。

目盛りの有効化

スライダーの目盛りを有効にするには、showTicks を true に設定します。
primaryTicks を使用してプライマリ目盛りの数を設定します。 SecondaryTicks を使用してセカンダリ目盛りの数を設定します。

<!--sample.component.html-->

<igx-slider 
    id="slider" 
    [maxValue]="100" 
    [step]="10"
    [showTicks]="true" 
    [primaryTicks]="3" 
    [secondaryTicks]="4">
    </igx-slider>

// sample.component.ts 

// Change slider type initial value
public type = SliderType.RANGE;

codesandbox で表示 stackblitz で表示

ラベルの向きと表示状態

以下のサンプルでは、secondaryTickLabels を false に設定して、すべてのセカンダリ ラベルを無効にします。

<igx-slider
    [step]="10"
    [type]="type"
    [maxValue]="100"
    [continuous]="true"
    [showTicks]="true"
    [primaryTicks]="3"
    [secondaryTicks]="4"
    [secondaryTickLabels]="false"
    [tickLabelsOrientation]="labelsOrientation">
    </igx-slider>

TickLabelsOrientation を BottomToTop に設定してすべての表示ラベルを回転します。

```typescript
... 
{
    public type = SliderType.RANGE:
    public labelsOrientation = TickLabelsOrientation.BottomToTop;
}
...

codesandbox で表示 stackblitz で表示

目盛りの位置

次に、目盛りの位置を変更する方法を見てみましょう。

<div class="slider-container">
    <igx-slider
        [maxValue]="20"
        [showTicks]="true"
        [secondaryTicks]="21"
        [primaryTickLabels]="false"
        [ticksOrientation]="ticksOrientation">
        </igx-slider>
</div>

位置の変更は ticksOrientation 入力から行われ、Bottom (デフォルト) から Mirror に変更されました。 これが目盛りの外観に反映され、スライダーの上部または下部に表示します。

  // The available options are: Top, Bottom and Mirror
  public ticksOrientation = TicksOrientation.Mirror;

codesandbox で表示 stackblitz で表示

Note

ticksOrientaion が Top または Mirror に設定され、目盛りラベルが表示されている場合、つまみラベルは意図的に非表示になります。このようにして、ユーザー エクスペリエンスの低下と 2 つのラベルの重複を防止できます。

ラベル ビューを含むスライダー目盛り

この例では、目盛りラベルとつまみラベルがどのように一緒に機能するかを示します。

<igx-slider
    [labels]="labels"
    [showTicks]="true"
    [secondaryTicks]="3"
></igx-slider>

  public type: SliderType = SliderType.RANGE;
  public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"];

codesandbox で表示 stackblitz で表示

いずれにしても反映されないため、ここでは、primaryTicks は設定されていません。コレクションの 長さ が優先されます。これは、secondaryTicks を設定できないことを意味しません。すべてのセカンダリ目盛りは、ラベルなしで空になります。

テンプレートのラベル

最後に、目盛りラベルにカスタム テンプレートを提供する方法と、テンプレート コンテキスト が提供するものを確認します。

    <igx-slider
    [showTicks]="true"
    [primaryTicks]="3"
    [secondaryTicks]="3">
        <ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
            {{ tickLabel(value, primary, idx) }}
        </ng-template>
    </igx-slider>

IgxTickLabelTemplateDirective を ng-template に適用すると、テンプレートがすべての目盛りラベルに割り当てられます。

Note

context は各目盛りごとに実行されます。

つまり、次への参照を提供します。

• 対応する各目盛りの値
• 目盛りがプライマリの場合
• 目盛りインデックス
• そして、labels コレクションがある場合。

  public tickLabel(value, primary, index) {
      if (primary) {
          return Math.round(value);
      }

      return value;
  }

上記の tickLabel コールバックから、各プライマリ目盛りの値を丸めていることがわかります。

codesandbox で表示 stackblitz で表示

スタイル設定

スライダー コンポーネントのデフォルト スタイル設定を変更するには、新しいテーマを作成します。

デモ

これは、新しいテーマを適用した結果です。

codesandbox で表示 stackblitz で表示

コンポーネント テーマの作成

はじめに、カスタム パレットを作成します。 コンポーネント テーマを作成し、カスタム パレットを適用します。

// In app-slider-styling.component.scss

// Create slider theme.
$custom-slider-theme: igx-slider-theme(
    $track-color: #ff7400,
    $track-hover-color: #ff7400,

    $thumb-color: #ff7400,

    $base-track-color: #ddd,
    $base-track-hover-color: #ccc,

    $tick-label-color: #b246c2,
    $tick-label-color-tall: #ff7400,

    $tick-color: #b246c2,
    $tick-color-tall: #ff7400,
);

コンポーネント テーマの適用

コンポーネント テーマを適用するには、igx-css-vars mixin をインクルードし、$custom-slider-theme マップを渡します。

// In app-slider-styling.component.scss

// Pass our custom-slider-theme to `igx-css-vars` mixin.
// The `:host` here makes sure that all the theming will affect only this slider component.
:host {
  @include igx-css-vars($custom-slider-theme);
}

API リファレンス

• IgxSliderComponent
• IgxSliderComponent スタイル
• SliderType
• IRangeSliderValue
• TicksOrientation
• TickLabelsOrientation

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)