Skip to main content

 

UIを設計する

 

OutSystems

RangeSliderIntervalパターン

RangeSliderIntervalパターンを使用すると、2つのハンドルをドラッグして間隔を設定できます。簡素でインタラクティブなユーザー入力によって間隔の値を制御できます。

RangeSliderIntervalパターンの使用方法

1. InitialIntervalStartとInitialIntervalEndの各入力に変数をバインドし、OnChangeイベントを使用して値の変更を処理するロジックを追加します。

2. MinValue、MaxValue、InitialIntervalStart、InitialIntervalEndを設定した後、OnChangeイベントを作成します。

3. Integer値を作成して割り当てます。

結果:

バーの色を変更する

ハンドルのサイズを変更する

入力パラメータ

入力名 説明 デフォルト値
MinValue スライダーの最小値。
MaxValue スライダーの最大値。
InitialIntervalStart デフォルトで選択される値。最小値と最大値の間である必要があります。
InitialIntervalEnd 間隔の最後のデフォルト値。最小値と最大値の間である必要があります。
Step スライダーはStepの増分で移動します。Stepが10の場合、スライダーは0から10、10から20、20から30のように移動します。
ShowPips スライダーの下に目盛りを表示します。
PipsStep 目盛りを描画した後の範囲の間隔(ShowPipsが有効になっている場合)。指定されていない場合は、コンポーネントによってデータに適するステップが推測されます。
ChangeEventDuringSlide スライダーのドラッグ中に変更イベントをトリガーします。[False]に設定されている場合、ユーザーがスライダーを放したときにのみ変更イベントがトリガーされます。 ヒント: スライダーの値に基づいてクエリを更新する場合、これを[False]に設定する可能性が高いです。

イベント

イベント名 説明 必須
OnChange スライダーで新しい値が選択された後に実行するアクション。新しいIntervalStartと新しいIntervalEndを返します。 True

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
noUi-handle .noui-active

サンプル

以下は、RangeSliderIntervalパターンを使用したサンプルです。

  • Was this article helpful?