Skip to main content

 

UIを設計する

 

OutSystems

RangeSliderパターン

RangeSliderパターンを使用すると、構成された範囲内でハンドルをドラッグして値を設定できます。簡素でインタラクティブなユーザー入力によって変数値を制御できます。

RangeSliderパターンの使用方法

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

1. MinValueMaxValueInitialValueを設定した後、OnChangeイベントを作成する必要があります。

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

結果:

バーの色を変更する

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

入力パラメータ

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

イベント

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

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
noUi-handle .noUi-active ハンドルをクリックしたときに追加されるクラス。

サンプル

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

  • Was this article helpful?