Angular Slider (スライダー) コンポーネントの概要

    Ignite UI for Angular Slider は、つまみをトラックで移動して指定した範囲内で値を選択できるフォーム コンポーネントです。トラックは連続またはステップとして定義でき、スライダーは単一値または範囲 (下限値と上限値) スライダーのタイプを選択できるように構成できます。

    Angular Slider の例

    Ignite UI for Angular Slider を使用した作業の開始

    Ignite UI for Angular Slider コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

    ng add igniteui-angular

    Ignite UI for Angular については、「はじめに」 トピックをご覧ください。

    次に、app.module.ts ファイルに IgxSliderModule をインポートします。

    Warning

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

    // app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxSliderModule } from 'igniteui-angular';
// import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package

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

    あるいは、16.0.0 以降、IgxSliderComponent をスタンドアロンの依存関係としてインポートすることも、IGX_SLIDER_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SLIDER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SLIDER_DIRECTIVES, FormsModule]
    /* or imports: [IgxSliderComponent, FormsModule] */
})
export class HomeComponent {
    public task: Task;
}

    スタンドアロン コンポーネントを使用する場合、HammerModule を app.config ファイルにインポートする必要があります。

    //app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { HammerModule } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HammerModule),
    provideRouter(appRoutes)
  ],
};

    Ignite UI for Angular Slider モジュールまたはディレクティブをインポートしたので、igx-slider コンポーネントの使用を開始できます。

    Angular Slider の使用

    不連続スライダー

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

    以下の例では、0% から 100% までの値を表示する不連続スライダーを定義し、step を増減ごとに 10% に設定します。 Angular ngModel を使用して、スライダーの value をコンポーネントの 「completion」 プロパティにバインドすると、入力コンポーネントと双方向バインディングを設定します。

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

<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
<igx-input-group type="border">
    <input igxInput id="percentInput" type="number" [(ngModel)]="task.completion" />
    <label igxLabel for="percentInput">Task Completion</label>
    <igx-suffix>%</igx-suffix>
</igx-input-group>

    // sample.component.ts 
import { Component, ViewChild } from '@angular/core';
import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
// import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-sample',
    styleUrls: ['./sample.component.scss'],
    templateUrl: './sample.component.html'
})
export class SampleComponent {
    public task = {
        completion: 10
    };

    constructor() { }
}

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

    連続スライダー

    最初に、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;

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

    範囲スライダー

    最初に、スライダーの type を RANGE に設定します。次に、スライダー値を lower と upper 値のプロパティを持つオブジェクトにバインドします。

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

<igx-slider 
    [type]="sliderType.RANGE" 
    [minValue]="0" 
    [maxValue]="1000" 
    [(lowerValue)]="priceRange.lower"
    [(upperValue)]="priceRange.upper">
</igx-slider>

<igx-input-group type="border">
    <label igxLabel for="lowerRange">From</label>
    <igx-prefix>$</igx-prefix>
    <input igxInput id="lowerRange" type="number" [(ngModel)]="priceRange.lower" />
</igx-input-group>

<igx-input-group type="border">
    <label igxLabel for="upperRange">To</label>
    <igx-prefix>$</igx-prefix>
    <input igxInput id="upperRange" type="number" [(ngModel)]="priceRange.upper" />
</igx-input-group>

    // sample.component.ts
import { Component } from '@angular/core';
import { IgxSliderType } from 'igniteui-angular';
// import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-sample',
  styleUrls: ['./sample.component.scss'],
  templateUrl: './sample.component.html'
})
export class SampleComponent {
  public sliderType = IgxSliderType;
  public priceRange = {
      lower: 200,
      upper: 800
  };

  constructor() { }
}

    Note

    RANGE タイプのスライダーを使用する場合、ngModel へのバインディングはスライダーからモデルを更新する方向でのみ動作します。両方の値に双方向バインディングを使用するには、lowerValue と upperValue バインディングを利用できます。

    最大値および最小値に近い値が適切でない場合があります。minValue と maxValue の設定以外に、ユーザー選択を更に制限するための範囲も設定できます。 これは、lowerBound および upperBound プロパティで設定します。この設定により、0 ～ 100 および 900 ～ 1000 の範囲でつまみを移動できなくなります。

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

<igx-slider 
    [type]="sliderType.RANGE" 
    [minValue]="0" 
    [maxValue]="1000"
    [(lowerValue)]="priceRange.lower"
    [(upperValue)]="priceRange.upper"
    [lowerBound]="100" 
    [upperBound]="900">
</igx-slider>

    ラベル モード

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

    Note

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

    このルールに対応する定義ができたら、labels 入力プロパティに渡す準備ができました。これは、データをトラック全体に均等に分散させることによって処理します。ラベル値は、コレクション内で定義したすべての初期値を表します。それらは、lowerLabel または upperLabel のいずれかを要求することによって、API を通じていつでもアクセスできます。

    Note

    labelsView が有効になっているときは、maxValue、minValue、step の入力が制御されることに注意してください。

    もう 1 つの重要な要素は、labelsView が有効になっているときに slider が更新プロセスを処理する方法です。 これは単にコレクションのインデックスで動作します。それぞれ、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 ディレクティブの両方を使用して、カスタム 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;

    ラベルの向きと表示状態

    以下のサンプルでは、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;
}
...

    目盛りの位置

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

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

    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"];

    いずれにしても反映されないため、ここでは、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 コールバックから、各プライマリ目盛りの値を丸めていることがわかります。

    スタイル設定

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

    デモ

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

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

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

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

// Create slider theme.
$custom-slider-theme: 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,
);

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

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

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

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

    API リファレンス

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