Skip to main content

 

UIを設計する

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

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?