RangeSliderパターン

RangeSliderパターンの使用方法

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

1.MinValue、MaxValue、InitialValueを設定した後、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パターンを使用したサンプルです。