Web Components Slider & Range Slider (スライダーと範囲スライダー) の概要

Web Components スライダーと範囲スライダーコンポーネントを使用すると、つまみをトラックに沿って動かすことで、特定の範囲を選択できます。トラックを連続またはステップに定義でき、単一または範囲スライダーのどちらかを選択できます。

Web Components スライダーと範囲スライダーの例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

IgcSliderComponent と IgcRangeSliderComponent を使用する前に、次のように登録する必要があります:

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcSliderComponent と IgcRangeSliderComponent の使用を開始する最も簡単な方法は次のとおりです:

<igc-slider value="40"></igc-slider>
<igc-range-slider lower="20" upper="70"></igc-range-slider>

Value (値)

スライダーと範囲スライダーコンポーネントの主な違いは、スライダーコンポーネントには単一のつまみがあり、範囲スライダーコンポーネントには 2 つのつまみがあることです。スライダーコンポーネントの単一のつまみで、その value プロパティが表示されます。範囲スライダーコンポーネントの 2 つのつまみは、lower 値と upper 値のプロパティを表示します。

いずれかの値が変更されると、両方のスライダーが 2 つのイベントを発行します。IgcInputComponent イベントは、キーボードまたはドラッグ操作を使用して値が変更されるたびに発行され、igcChange イベントは、値の変更がドラッグエンドまたはキーボード操作でコミットされたときに発行されます。

スライダーつまみをドラッグしている間、ツールチップにその値が表示されます。hideTooltip プロパティを使用して、このツールチップを非表示にすることができます。

Disabled (無効)

スライダーの disabled プロパティを使用して、ユーザーの操作を無効にすることができます。

制約

スライダーのトラックには、最小値と最大値があり、min と max プロパティを使用して構成されます。さらに、lowerBound プロパティと upperBound プロパティを使用して、つまみのドラッグを制限できます。

Step (ステップ)

step プロパティは、値が順守するスライダーの精度を指定します。デフォルトでは、スライダートラックは連続して見えます。スライダーの discreteTrack プロパティを true に設定すると、トラックのステップが表示されます。

step プロパティが 0 に設定されている場合、ステッピングは暗黙指定されず、スライダー範囲内の任意の値が許可されます。この場合、discreteTrack が true に設定されていても、スライダーは連続して見えます。

Tick Marks (目盛り)

スライダーコンポーネントは、目盛りとラベルを表示できます。スライダーコンポーネントは、プライマリとセカンダリの 2 種類の目盛りをサポートしています。プライマリ目盛りを表示するには、primaryTicks プロパティを 1 より大きい値に設定する必要があります。プライマリ目盛りの数は、トラック上で均等に分散されます。セカンダリ目盛りを表示するには、secondaryTicks プロパティを 0 より大きい値に設定する必要があります。secondaryTicks の値は、2 つのプライマリ目盛りごとのセカンダリ目盛りの数を指定します。

さらに、tickOrientation プロパティを使用して、目盛りの方向を構成できます。デフォルトでは、tickOrientation 値は end で、スライダートラックの下に目盛りが表示されます。トラックの上に表示する start と、トラックの上下の目盛りをミラーする mirror に設定できます。

デフォルトでは、目盛りはラベルとその値を表示します。tickLabelRotation プロパティを使用して、目盛りラベルの回転を変更できます。さらに、hidePrimaryLabels プロパティと hideSecondaryLabels プロパティを使用して、プライマリ目盛りとセカンダリ目盛りのラベルを非表示にすることができます。

Value Format (値の形式)

つまみと目盛りのラベル値をを書式設定する場合、スライダーは valueFormat、valueFormatOptions、および locale プロパティを提供します。valueFormatOptions を使用すると、指定された locale を考慮して、小数部と有効桁数、スタイル (10 進数、通貨、パーセント、単位)、表記などを指定できます。valueFormat は、書式設定オプションが適用された値に置き換えられる {0} 識別子を含む可能性のある文字列です。

ラベル

場合によっては、スライダーの値を文字列値として書式設定する必要があります。つまり、値 [0, 1, 2] を ['Low', 'Medium', 'High'] にマップします。このシナリオでは、スライダーを使用して、スライダー内に IgcSliderLabelComponent 要素を定義できます。スライダーラベルのテキストコンテンツは、つまみラベルと目盛りラベルに使用されます。スライダーラベルが提供されている場合、min、max、および step プロパティが自動的に計算されるため、提供されたラベルにマップされない値は許可されないことに注意してください。'Low'、'Medium'、および 'High' ラベルの場合、min は 0 に設定され、max は 2 に設定され、step は 1 に設定されます。

スタイル設定

スライダーコンポーネントは、内部要素の CSS パーツを公開します。次の表に、すべての CSS パーツを示します:

名	説明
base	スライダーの基本ラッパー。
ticks	目盛りのコンテナー。
tick-group	目盛りグループコンテナー。
tick	目盛りの要素。
tick-label	目盛りラベルの要素。
tick-label-inner	目盛りラベルの内側の要素。
thumbs	つまみのコンテナー。
thumb	つまみの要素。
thumb-label	つまみツールチップのラベルコンテナー。
thumb-label-inner	つまみツールチップのラベル要素。
track	トラックのコンテナー。
steps	トラックステップの要素。
inactive	トラックの非アクティブな要素。
fill	トラックの塗りつぶし部分。

次のサンプルは、トラックの塗りつぶしとつまみのパーツのスタイルを設定する方法を示しています。