メインコンテンツまでスキップ

Slider

Sliderウィジェットは、決められた範囲の中で値を1つドラッグして選択する入力コントロールです。
音量・明るさ・比率のような連続的な値を調整するときに使います。

定義・役割

Sliderウィジェットは、横方向のトラック上のつまみ(thumb)をドラッグしてminmaxの範囲の値を選択します。divisionsでトラックを均等な段階に分けて離散値だけを選ばせることもでき、トラック・目盛り・つまみの色とトラックの太さを指定できます。

  • カテゴリー: Contents
  • デフォルトの範囲: min 0.0 〜 max 1.0
  • デフォルトの値: 0.0
  • デフォルトのサイズ(SizedBox): 幅100、高さ50
  • スライダーの種類: material(デフォルト)/ adaptive

機能

機能説明
値の選択トラック上のつまみをドラッグしてminmaxの間の値を選択します。
段階分けdivisionsでトラックを均等な段階に分け、離散値だけを選択させます。未設定の場合は連続値です。
スライダーの種類material(デフォルト)とadaptive(プラットフォーム適応型)から選びます。
色・トラックの設定有効・無効トラック、目盛り、つまみ、オーバーレイの色とトラックの太さを指定します。
値変更イベントonChangedで、ドラッグ中に値が変わったときに実行する動作を接続します。

使い方

  1. 左のウィジェットパレットでContentsカテゴリーを開きます。
  2. Slider項目をキャンバスにドラッグ&ドロップします。
  3. 右のプロパティパネルでminmaxで値の範囲を設定します。
  4. 必要に応じてdivisionsで段階を分け、トラック・つまみの色とtrackHeightを調整します。
  5. onChangedに、値が変わったときに実行する動作(ロジック・スクリプト)を接続します。

プロパティ

プロパティ説明デフォルト値値 / タイプ
sliderTypeスライダーの種類materialmaterial, adaptive
value現在選択されている値0.0数値
min選択できる最小値0.0数値
max選択できる最大値1.0数値
divisionsトラックを分ける段階の数(離散値)。未設定の場合は連続値未設定整数(1以上)
trackHeightトラックの太さ未設定数値
activeTrackColorつまみの左側(選択区間)のトラックの色未設定カラー
inactiveTrackColorつまみの右側(未選択区間)のトラックの色未設定カラー
activeTickMarkColor選択区間の目盛りの色未設定カラー
inactiveTickMarkColor未選択区間の目盛りの色未設定カラー
thumbColorつまみの色未設定カラー
overlayColorつまみを押したときに表示されるオーバーレイの色未設定カラー
focusNodeフォーカス制御に使うフォーカスノード未設定フォーカスノード
autofocus画面表示時に自動でフォーカスするかfalsetrue / false

注意・ヒント

ヒント

divisionsを指定すると、値は連続ではなく均等な段階に区切られて選択されます。未設定の場合はminmaxの間の連続値を自由に選べます。

注記

activeTrackColorはつまみの左側(選択された)区間に、inactiveTrackColorは右側(選択されていない)区間に適用されます。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、Slider Widget Controlドキュメントでご確認ください。