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

Ticks position

Let’s move on and see how to change the position of the ticks.

<div class="slider-container">

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

The position change has come from the ticksOrientation input, which is changed from Bottom(default) to Mirror. This mirrors the visualization of the ticks and displays them above and below the slider.

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

Orientation

When the ticksOrientation is set to Top or Mirror and there are visible tick labels the thumb label is hidden intentionally. This prevents a bad user experience and overlapping between the two labels.

Slider ticks with labels view

This example show how the tick labels and the thumb label works together.

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

Here, the primaryTicks input has not been set, because it won’t be reflected in any way. The length of the collection takes precedence over it. This does not mean that secondaryTicks cannot be set. All secondary ticks will be empty (without any labels).

Template labels

Lastly, we will see how we can provide a custom template for the tick labels and what the IgxTicksComponent template context provides.

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

Applying IgxTickLabelTemplateDirective to the ng-template assigns the template over all tick labels.

Which means that it provides a reference to:

• each corresponding tick value
• If that tick is primary.
• tick index.
• And the labels collection if we have such one.

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

      return value;
  }

In the tickLabel callback above, we are rounding the value of every primary tick.

Styling

Slider Theme Property Map

When you modify a primary property, all related dependent properties are automatically updated to reflect the change:

To customize the Slider, you first need to import the index file, where all styling functions and mixins are located.

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

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

Next, we have to create a new theme that extends the slider-theme and pass the parameters which we’d like to change. By providing just the $track-color or $thumb-color parameter, the theme will automatically generate all related colors for the track and thumb, and their various interaction states.

You can also override additional properties, such as tick colors and labels, for more precise control.

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

The last step is to include the newly created component theme in our application.

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

Demo

This is the final result from applying our new theme.

Styling with Tailwind

You can style the slider using our custom Tailwind utility classes. Make sure to set up Tailwind first.

Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:

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

The utility file includes both light and dark theme variants.

• Use light-* classes for the light theme.
• Use dark-* classes for the dark theme.
• Append the component name after the prefix, e.g., light-slider, dark-slider.

Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

You can find the full list of properties in the IgxSlider Theme. The syntax is as follows:

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

At the end your slider should look like this:

API References