Godot入門：HSliderの使い方と活用法

はじめに
HSliderとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

音量バーをドラッグで調整する、明るさを左右にスライドして変える——ゲームの設定画面でよく見るあの横スライダーを作れるのが HSlider です。直感的な操作感で、数値の大小をビジュアルで伝えられます。

この記事では、HSlider の仕組みと使いどころ、よく触るプロパティを紹介します。

HSliderとは？

HSlider は 横方向にドラッグするつまみ（ハンドル）で数値を調整できるスライダーUIノードです。最小値から最大値の範囲をバーで表現し、つまみの位置が現在の値を示します。

ラジカセの音量ダイヤルを横に引き伸ばしたイメージです。左端が最小、右端が最大、つまみを左右に動かすだけで値がリアルタイムに変わります。HSlider はその操作感をゲームのUIで再現します。

継承ツリーは HSlider → Slider → Range → Control → CanvasItem → Node です。SpinBox・ProgressBar と同じ Range クラスを継承しているため、min_value・max_value・value・step が共通です。縦方向版の VSlider も同じ使い方で使えます。

HSlider の各部名称（バー・塗り・つまみ・目盛り） — バー上のつまみをドラッグするか、バーをクリックして値を変える

このノードを使うべき場面

音量・BGM・SE の調整：ゲームの設定画面で音量を直感的にスライドで調整するとき
明るさ・カメラ感度の調整：視覚的な強弱を連続値でコントロールしたいとき
ゲームスピード・難易度の調整：敵の強さや速度倍率を段階的に変えるとき
色選択のRGB/HSVスライダー：カラーピッカーを自作するときの各チャンネル調整
タイムラインのスクラブ：リプレイやムービーの再生位置をシークするUI

別のノードが適切な場面：

正確な数値入力が必要 → SpinBox（034）と組み合わせるか、SpinBox 単体で対応
縦方向のスライダーにしたい → 同じ使い方の VSlider を使う

主なプロパティと機能

プロパティ	型	役割
`value`	float	現在の値。変えるとつまみ位置が更新される
`min_value`	float	スライダーの最小値（デフォルト: 0）
`max_value`	float	スライダーの最大値（デフォルト: 100）
`step`	float	値の変化の最小単位（デフォルト: 1）。0 にすると連続値になる
`tick_count`	int	バー上に表示する目盛りの数（0 で非表示）
`ticks_on_borders`	bool	`true` にすると両端（最小・最大）にも目盛りを表示する
`editable`	bool	`false` にするとつまみの操作を禁止する（表示のみ）
`value_changed`（シグナル）	Signal	値が変わるたびに新しい値（float）を引数として発火する
`drag_ended`（シグナル）	Signal	ドラッグ操作が終わったときに発火する（操作完了時に保存したいときに使う）

コード例：音量スライダー（SpinBox と連動）

@onready var vol_slider: HSlider = $VolumeSlider
@onready var vol_spin:   SpinBox = $VolumeSpinBox

func _ready() -> void:
    vol_slider.min_value = 0
    vol_slider.max_value = 100
    vol_slider.step      = 1
    vol_slider.value     = SaveData.volume

    vol_spin.min_value = 0
    vol_spin.max_value = 100
    vol_spin.value     = SaveData.volume

    # スライダーと SpinBox を相互連動させる
    vol_slider.value_changed.connect(func(v): vol_spin.value = v)
    vol_spin.value_changed.connect(func(v): vol_slider.value = v)

    # 操作完了時に保存（ドラッグ中は保存しない）
    vol_slider.drag_ended.connect(_on_drag_ended)

func _on_drag_ended(_changed: bool) -> void:
    SaveData.volume = int(vol_slider.value)
    AudioServer.set_bus_volume_db(
        AudioServer.get_bus_index("Master"),
        linear_to_db(vol_slider.value / 100.0)
    )

HSlider と SpinBox を組み合わせた音量設定UI — HSlider（大まかに）＋ SpinBox（正確に）の組み合わせが設定UIの定番パターン

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ・テクニック	変えると何が起きるか
`step` を `0` に	ドラッグが完全に連続値になり、なめらかな変化が可能になる。Tween との組み合わせにも向いている
`tick_count` を設定する	バー上に目盛りが表示され、目安の位置がわかりやすくなる。難易度スライダーなどに有効
`drag_ended` シグナルで保存する	ドラッグ中ではなく操作完了時だけ保存処理を走らせられる。頻繁な書き込みを防げる
SpinBox と `value` を相互連動させる	スライダーとスピナーが同期し、どちらから操作しても値が一致する。設定UIの定番パターン
`editable` を `false` に	ProgressBar の代わりに「見た目だけのバー」として使える。読み取り専用のスタッツ表示に