[Unity] uGUIのスライダー(Slider)の使い方

スライダー(Slider)とは

スライダー(Slider)は、「一定範囲内の数値をドラッグで調整する」ためのUIコンポーネントです。

• スライダー(Slider)の主な特徴

• スライダー(Slider)の主な用途

スライダー(Slider)を構成するオブジェクト

Slider
├── Background
├── Fill Area
│   └── Fill
└── Handle Slide Area
    └── Handle

Imageコンポーネントについては、下記の記事で詳しく解説しているので参照してください。

あわせて読みたい

[Unity] uGUIの画像(Image)の使い方 はじめに UnityのuGUI(Unity GUI)におけるImageコンポーネントは、ユーザーインターフェースに画像を表示するための基本的な要素です。本記事では、Imageコンポーネント…

スライダー(Slider)の基本的な使い方

スライダー(Slider)を使用するには、UI要素を配置するためのCanvasが必要です。
もし、シーンにCanvasが無い場合は、Canvasを作成してください。

キャンバス(Canvas)の作成：
「ヒエラルキー(Hierarchy)」ウィンドウを右クリック⇒UI⇒キャンバス(Canvas)
を選択してCanvasを作成します。

スライダー(Slider)の作成：
「ヒエラルキー」ウィンドウのCanvasオブジェクトを右クリック⇒UI⇒スライダー(Slider)
を選択してSliderをCanvasに追加します。

Sliderコンポーネントでは以下の項目を設定できます。

• Interactable
• 遷移 (Transition)
• ナビゲーション (Navigation)
• 可視化 (Visualize)
• 塗りつぶし矩形 (Fill Rect)
• ハンドル用の矩形 (Handle Rect)
• 向き (Direction)
• Min Value
• Max Value
• 総数 (Whole Numbers)
• Value
• 値の変更時 (Single) (On Value Changed (Single))

順番に解説していきます。

Interactable

スライダー(Slider)がユーザー操作を受け付けるかどうかを制御するプロパティです。

詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。

あわせて読みたい

[Unity] uGUIのボタン(Button (Legacy))の使い方 はじめに UnityのuGUIであるButton (Legacy)は、ユーザーインターフェース（UI）で最も基本的かつ頻繁に使用される要素の一つです。本記事では、Button (Legacy) の基本…

遷移 (Transition)

スライダー(Slider)の状態（通常／ホバー／クリック／無効）に応じて、見た目を変える仕組みです。

詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。

あわせて読みたい

[Unity] uGUIのボタン(Button (Legacy))の使い方 はじめに UnityのuGUIであるButton (Legacy)は、ユーザーインターフェース（UI）で最も基本的かつ頻繁に使用される要素の一つです。本記事では、Button (Legacy) の基本…

ナビゲーション (Navigation)

キーボード・ゲームパッドなどの入力デバイスを使って UI を移動（フォーカス）するための制御機能です。

詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。

あわせて読みたい

[Unity] uGUIのボタン(Button (Legacy))の使い方 はじめに UnityのuGUIであるButton (Legacy)は、ユーザーインターフェース（UI）で最も基本的かつ頻繁に使用される要素の一つです。本記事では、Button (Legacy) の基本…

可視化 (Visualize)

Inspector の Navigation セクション右上に表示される Visualize ボタンをクリックすると、
Sceneビューに「矢印（Arrow）」が表示され、他のUIへのナビゲーション接続が見えるようになります。

これは、キーボードやゲームパッドによるUI移動経路を直感的に確認するためのデバッグツールです。

塗りつぶし矩形 (Fill Rect)

スライダーの進捗（＝現在の値）に応じて、バーが「塗りつぶされる」エリアを指定するプロパティです。
デフォルトでは子オブジェクトの Fillがアサインされています。

設定対象にするオブジェクトは、以下の要件を満たす必要があります。

ハンドル用の矩形 (Handle Rect)

スライダー上でユーザーがつまんで操作できる「ハンドル（つまみ）」の RectTransform を指定するプロパティです。
※スライダーの「現在値」を直接ドラッグで変更できる、操作用のUIパーツにあたります。
デフォルトでは子オブジェクトの Handle がアサインされています。

• 主な機能と操作

向き (Direction)

スライダーの値の進行方向（＝塗りつぶしやハンドルが動く方向）を決定するプロパティです。

• 選択可能な向きの種類

Min Value

スライダーが取りうる値の範囲における「最小値（下限）」を設定するプロパティです。

Max Value

スライダーが取りうる数値の「最大値（上限）」を指定するプロパティです。

総数 (Whole Numbers)

スライダーの値を「整数値のみに制限するかどうか」を指定するプロパティです。

• 挙動の違い

Value

スライダーが現在示している値そのもの（ユーザーが操作中／設定中の数値）を表すプロパティです。

• Valueの特性

値の変更時 (Single) (On Value Changed (Single))

スライダーの値が変化したときに自動的に呼び出されるイベント（UnityEvent） です。

public void OnSliderValueChanged(float value)
{
    Debug.Log("スライダーの値が変更されました：" + value);
}

• イベントを発行させずに値を変更する方法

slider.SetValueWithoutNotify(50f); // onSliderValueChanged を呼ばない