RangeSlider
RangeSliderウィジェットは、2つのハンドル（サム）で最小値・最大値の範囲を同時に選択する入力ウィジェットです。
価格帯・年齢層など、始まりと終わりがある区間を選ぶときに使用します。
定義・役割
RangeSliderウィジェットは、1本のトラック上に2つのハンドルを描画します。ユーザーがハンドルをドラッグすると、開始値と終了値からなる範囲が決まります。最小・最大の境界、目盛りの分割、トラック・目盛り・ハンドルのカラーを設定できます。
- カテゴリー: Contents
- デフォルト範囲:
0 ~ 1
機能
| 機能 | 説明 |
|---|---|
| 範囲の選択 | 2つのハンドルで開始値と終了値を同時に指定し、1つの区間を選びます。 |
| 最小・最大の設定 | min・maxで全体の値の範囲を指定します。 |
| 目盛りの分割 | divisionsで離散的な段階（目盛り）に分け、値を段階的に選択します。 |
| 色・太さの設定 | トラックの太さ（trackHeight）と、選択済み・未選択のトラック・目盛り・ハンドルのカラーを調整します。 |
| ドラッグ動作の連結 | 値が変わっている間・ドラッグ開始時・ドラッグ終了時のそれぞれに動作を連結します。 |
使い方
- 左側のウィジェットパレットでContentsカテゴリーを開きます。
- RangeSlider項目をキャンバスにドラッグ&ドロップします。
- 右側のプロパティパネルで、
min・maxにより値の範囲を設定します。 - 必要に応じて、
divisionsで目盛りの段階を、trackHeightやカラープロパティで見た目を調整します。 onChanged・onChangeEndなどに、値が変わったときに実行する動作（ロジック・スクリプト）を連結します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
values | 現在選択されている範囲（開始値・終了値） | 0 ~ 1 | 範囲値（start–end） |
min | 選択できる最小値 | 0 | 数値 |
max | 選択できる最大値 | 1 | 数値 |
divisions | 目盛りの分割数（離散的な段階）。指定すると値が段階的に移動します | 未指定 | 整数（1以上） |
trackHeight | トラックの太さ | 未指定 | 数値 |
activeTrackColor | 選択された区間のトラックの色 | 未指定 | カラー |
inactiveTrackColor | 選択されていない区間のトラックの色 | 未指定 | カラー |
activeTickMarkColor | 選択された区間の目盛りの色 | 未指定 | カラー |
inactiveTickMarkColor | 選択されていない区間の目盛りの色 | 未指定 | カラー |
thumbColor | 調節ハンドル（サム）の色 | 未指定 | カラー |
overlayColor | ハンドルを押したときのオーバーレイの色 | 未指定 | カラー |
注意・ヒント
ヒント
valuesの開始値・終了値はmin・maxの範囲内に収まる必要があります。デフォルト範囲は0 ~ 1なので、別のスケールを使う場合はmin・maxを先に設定してください。
注記
divisionsを指定すると、値は連続ではなく目盛り単位でのみ移動します。1以上の整数のみ指定できます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、RangeSlider Widget Controlドキュメントで確認してください。