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 をインポートします。

// app.module.ts

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

@NgModule({
    ...
    imports: [..., IgxSliderModule],
    ...
})
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/slider';
// 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;
}

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 } from 'igniteui-angular/input-group';
import { IgxSliderComponent } from 'igniteui-angular/slider';
// 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 プロパティを設定し、最小値および最大値を定義します。

<!--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/slider';
// 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() { }
}

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

ラベル モード

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

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

もう 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 に対応すると、スライドできる範囲が制限されます。

ラベルのテンプレート化

上記では、IgxThumbFromTemplateDirective ディレクティブと IgxThumbToTemplateDirective ディレクティブの両方を使用して、カスタム label テンプレートを提供する方法を意図的に示しました。直感的に IgxThumbFromTemplateDirective は lowerLabelに対応し、IgxThumbToTemplateDirective は IgxThumbToTemplateDirective に対応すると想定できます。
ここでの 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 を TickLabelsOrientation に設定してすべての表示ラベルを回転します。

... 
{
    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 に変更されています。 これにより、目盛りがスライダーの上下の両方に表示されます。

  // 使用可能なオプション: Top、Bottom、Mirror
  public ticksOrientation = TicksOrientation.Mirror;

向き

ticksOrientation が Top または Mirror に設定され、目盛りラベルが表示されている場合、つまみラベルは意図的に非表示になります。これにより、2 つのラベルが重なって操作性が低下するのを防ぎます。

ラベル付きの Slider 目盛り

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

<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 を設定できないわけではありません。すべてのセカンダリ目盛りは空になります (ラベルなし)。

ラベルのテンプレート

最後に、目盛りラベルにカスタム テンプレートを指定する方法と、IgxTicksComponent のテンプレート コンテキストが提供する内容を見てみましょう。

<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 に適用すると、すべての目盛りラベルにそのテンプレートが割り当てられます。

つまり、次の参照が提供されます:

• 対応する各目盛りの値
• その目盛りがプライマリかどうか。
• 目盛りのインデックス。
• labels コレクション (存在する場合)。

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

      return value;
  }

上記の tickLabel コールバックでは、すべてのプライマリ目盛りの値を丸めています。

スタイル設定

Slider テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。

Slider をカスタマイズするには、まずすべてのスタイル設定関数とミックスインが含まれる index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

次に、slider-theme を拡張する新しいテーマを作成し、変更するパラメーターを渡します。$track-color または $thumb-color パラメーターを指定するだけで、テーマがトラックとつまみの関連するすべての色を、さまざまな操作状態ごとに自動的に生成します。

より細かく制御するために、目盛りの色やラベルなどの追加のプロパティをオーバーライドすることもできます。

$custom-slider-theme: slider-theme(
  $thumb-color: #ff7400,
  $tick-label-color: #b246c2,
  $tick-color: #b246c2
);

最後の手順は、新しく作成したコンポーネント テーマをアプリケーションに含めることです。

:host {
  @include tokens($custom-slider-theme);
}

デモ

新しいテーマを適用した最終結果です。

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して slider をスタイル設定できます。まず Tailwind を設定してください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します (例: light-slider、dark-slider)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、IgxSlider Theme で確認できます。構文は次のとおりです:

<igx-slider
class="!light-slider ![--thumb-color:#7B9E89]"
>
</igx-slider>

最終的に、slider は次のようになります:

API リファレンス

• Slider
• IgxSliderComponent Styles
• SliderType
• IRangeSliderValue
• TicksOrientation
• TickLabelsOrientation

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

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub