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

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

    Blazor スライダーと範囲スライダーの例

    使用方法

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
      typeof(IgbSliderModule),
      typeof(IgbRangeSliderModule)
    );
    
    <IgbSlider Value="40" />
    <IgbRangeSlider Lower="20" Upper="70" />
    

    Value (値)

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

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

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

    Disabled (無効)

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

    制約

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

    Step (ステップ)

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

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

    Tick Marks (目盛り)

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

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

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

    Value Format (値の形式)

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

    ラベル

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

    スタイル設定

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

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

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

    API リファレンス

    その他のリソース