Back to Qt.io
Contact Us Blog Download Qt
このページでは

スライダーの例

「スライダーの例」では、Qt で利用可能なさまざまな種類のスライダー（QSlider 、QScrollBar 、QDial ）の使用方法を紹介します。

Qt には、QSlider 、QScrollBar 、QDial の 3 種類のスライダー型ウィジェットが用意されています。これらはすべて、その機能の大部分をQAbstractSlider から継承しており、違いは外観や操作感に限られるため、理論上はアプリケーション内で互いに置き換えることが可能です。この例では、それぞれの外観や動作、およびプロパティを通じて動作や外観をどのように制御できるかを示します。

また、この例では、シグナルとスロットを使用して2つ以上のウィジェットの動作を同期させる方法や、resizeEvent() をオーバーライドしてレスポンシブレイアウトを実装する方法についても説明しています。

さまざまなスライダー、スクロールバー、ダイヤルのギャラリー

「Sliders」例のスクリーンショット

「Sliders」の例は、2つのクラスで構成されています：

  • SlidersGroup はカスタムウィジェットです。これは、QSlider 、QScrollBar 、およびQDial を組み合わせたものです。
  • Window は、QGroupBox とSlidersGroupを組み合わせたメインウィジェットです。QGroupBox には、スライダーのようなウィジェットの動作を制御するいくつかのウィジェットが含まれています。

まず、Window クラスについて確認し、次にSlidersGroup クラスについて見ていきます。

Windowクラスの定義

class Window : public QWidget
{
    Q_OBJECT

public:
    Window(QWidget *parent = nullptr);

private:
    void createControls(const QString &title);
    void resizeEvent(QResizeEvent *e);

    SlidersGroup *slidersGroup;

    QGroupBox *controlsGroup;
    QLabel *minimumLabel;
    QLabel *maximumLabel;
    QLabel *valueLabel;
    QCheckBox *invertedAppearance;
    QCheckBox *invertedKeyBindings;
    QSpinBox *minimumSpinBox;
    QSpinBox *maximumSpinBox;
    QSpinBox *valueSpinBox;
    QBoxLayout *layout;
};

Window クラスはQWidget を継承しています。このクラスはスライダーウィジェットを表示し、ユーザーが最小値、最大値、現在値を設定したり、外観、キーバインド、向きをカスタマイズしたりできるようにします。これらの制御機能を提供するウィジェットを作成し、それらをスライダーウィジェットに接続するために、プライベート関数createControls() を使用します。

Windowクラスの実装

Window::Window(QWidget *parent)
    : QWidget(parent)
{
    slidersGroup = new SlidersGroup(tr("Sliders"));

    createControls(tr("Controls"));

コンストラクタでは、まずスライダーウィジェットを表示するSlidersGroup ウィジェットを作成します。createControls() を使用して制御ウィジェットを作成し、それらをスライダーに接続します。

    layout = new QBoxLayout(QBoxLayout::LeftToRight);
    layout->addWidget(controlsGroup);
    layout->addWidget(slidersGroup);
    setLayout(layout);

    minimumSpinBox->setValue(0);
    maximumSpinBox->setValue(20);
    valueSpinBox->setValue(5);

    setWindowTitle(tr("Sliders"));
}

最小値、最大値、および現在の値を初期化する前に、制御ウィジェットのグループとスライダーを水平レイアウトに配置します。現在の値の初期化は、valueSpinBox とSlidersGroup ウィジェット間で確立した接続を通じて、スライダーウィジェットに伝播されます。最小値と最大値は、createControls() で作成した接続を通じて伝播されます。

void Window::createControls(const QString &title)
{
    controlsGroup = new QGroupBox(title);

    minimumLabel = new QLabel(tr("Minimum value:"));
    maximumLabel = new QLabel(tr("Maximum value:"));
    valueLabel = new QLabel(tr("Current value:"));

    invertedAppearance = new QCheckBox(tr("Inverted appearance"));
    invertedKeyBindings = new QCheckBox(tr("Inverted key bindings"));

createControls() のプライベート関数内では、QGroupBox （controlsGroup ）にコントロールウィジェットを表示させます。グループボックスは、枠、タイトル、キーボードショートカットを提供でき、その内部にさまざまなウィジェットを表示することができます。コントロールウィジェットのグループは、2つのチェックボックスと、ラベル付きの3つのスピンボックスで構成されています。

ラベルの作成後、2つのチェックボックスを作成します。チェックボックスは通常、アプリケーション内で有効または無効にできる機能を表すために使用されます。「invertedAppearance 」が有効になっている場合、スライダーの値は反転します。以下の表は、さまざまなスライダーのようなウィジェットの外観を示しています：

QSliderQScrollBarQDial
通常反転通常反転通常反転
Qt::Horizontal左から右へ右から左へ左から右へ右から左へ時計回り反時計回り
Qt::Vertical下から上へ上から下へ上から下へ下から上へ時計回り反時計回り

垂直のQSlider の外観を反転させることはよくあります。たとえば、音量を制御する垂直スライダーは通常、下から上へと動きます（反転していない外観）が、画面上のオブジェクトの位置を制御する垂直スライダーは、画面座標が上から下へと進むため、上から下へと動く場合があります。

invertedKeyBindings オプションが有効になっている場合（QAbstractSlider::invertedControls プロパティに対応）、スライダーのホイールおよびキーイベントが反転します。通常のキーバインドでは、マウスホイールを「上」にスクロールしたり、Page Upなどのキーを使用したりすると、スライダーの現在の値が最大値に向かって増加します。 反転状態では、同じホイールやキーの操作で値がスライダーの最小値に向かって移動します。これは、スライダーの表示が反転している場合に役立ちます。ユーザーによっては、キー操作が値に対して従来と同じ動作をすることを期待する一方、PageUp が画面上で「上」を意味すると期待するユーザーもいるからです。

なお、水平および垂直のスクロールバーについては、デフォルトでキーの割り当てが反転しています。PageDown は現在の値を増加させ、PageUp は値を減少させます。

    minimumSpinBox = new QSpinBox;
    minimumSpinBox->setRange(-100, 100);
    minimumSpinBox->setSingleStep(1);

    maximumSpinBox = new QSpinBox;
    maximumSpinBox->setRange(-100, 100);
    maximumSpinBox->setSingleStep(1);

    valueSpinBox = new QSpinBox;
    valueSpinBox->setRange(-100, 100);
    valueSpinBox->setSingleStep(1);

次に、スピンボックスを作成します。QSpinBox では、ユーザーは上向きおよび下向きのボタンをクリックするか、キーボードのUp およびDown キーを押して、現在表示されている値を変更することで値を選択できます。また、ユーザーは手動で値を入力することも可能です。スピンボックスは、QSlider 、QScrollBar 、およびQDial ウィジェットの最小値、最大値、および現在の値を制御します。

    connect(slidersGroup, &SlidersGroup::valueChanged,
            valueSpinBox, &QSpinBox::setValue);
    connect(valueSpinBox, &QSpinBox::valueChanged,
            slidersGroup, &SlidersGroup::setValue);
    connect(minimumSpinBox, &QSpinBox::valueChanged,
            slidersGroup, &SlidersGroup::setMinimum);
    connect(maximumSpinBox, &QSpinBox::valueChanged,
            slidersGroup, &SlidersGroup::setMaximum);
    connect(invertedAppearance, &QCheckBox::toggled,
            slidersGroup, &SlidersGroup::invertAppearance);
    connect(invertedKeyBindings, &QCheckBox::toggled,
            slidersGroup, &SlidersGroup::invertKeyBindings);

    QGridLayout *controlsLayout = new QGridLayout;
    controlsLayout->addWidget(minimumLabel, 0, 0);
    controlsLayout->addWidget(maximumLabel, 1, 0);
    controlsLayout->addWidget(valueLabel, 2, 0);
    controlsLayout->addWidget(minimumSpinBox, 0, 1);
    controlsLayout->addWidget(maximumSpinBox, 1, 1);
    controlsLayout->addWidget(valueSpinBox, 2, 1);
    controlsLayout->addWidget(invertedAppearance, 0, 2);
    controlsLayout->addWidget(invertedKeyBindings, 1, 2);
    controlsGroup->setLayout(controlsLayout);

}

次に、slidersGroup とvalueSpinBox を相互に接続し、いずれかの現在の値が変更された際に、スライダーウィジェットと制御ウィジェットが同期して動作するようにします。valueChanged() シグナルは、新しい値を引数として発火します。setValue() スロットは、ウィジェットの現在の値を新しい値に設定し、新しい値が以前の値と異なる場合はvalueChanged() を発火します。

シグナルとスロットを通じて、コントロールウィジェットとスライダーウィジェットの動作を同期させます。各コントロールウィジェットを、スライダーウィジェットの水平グループと垂直グループの両方に接続します。また、正しい「ページ」が表示されるように、orientationCombo をQStackedWidget に接続します。最後に、controlsGroup グループボックス内のQGridLayout にコントロールウィジェットを配置します。

void Window::resizeEvent(QResizeEvent *)
{
    if (width() == 0 || height() == 0)
        return;

    const double aspectRatio = double(width()) / double(height());

    if (aspectRatio < 1.0) {
        layout->setDirection(QBoxLayout::TopToBottom);
        slidersGroup->setOrientation(Qt::Horizontal);
    } else if (aspectRatio > 1.0) {
        layout->setDirection(QBoxLayout::LeftToRight);
        slidersGroup->setOrientation(Qt::Vertical);
    }
}

最後に、QWidget のresizeEvent()をオーバーライドします。ゼロ除算のチェックを行い、それ以外の場合はウィジェットのアスペクト比を計算します。ウィンドウが縦向きの場合、コントロールウィジェットとスライダーのグループを縦方向に配置するようにレイアウトを設定し、スライダーには横方向の向きを指定します。 ウィンドウが横向きの場合、スライダーと制御用ウィジェットを並べて表示するようにレイアウトを変更し、スライダーの向きを縦向きにします。

SlidersGroup クラスの定義

class SlidersGroup : public QGroupBox
{
    Q_OBJECT

public:
    SlidersGroup(const QString &title, QWidget *parent = nullptr);

signals:
    void valueChanged(int value);

public slots:
    void setValue(int value);
    void setMinimum(int value);
    void setMaximum(int value);
    void invertAppearance(bool invert);
    void invertKeyBindings(bool invert);
    void setOrientation(Qt::Orientation orientation);

private:
    QSlider *slider;
    QScrollBar *scrollBar;
    QDial *dial;
    QBoxLayout *slidersLayout;
};

SlidersGroup クラスはQGroupBox を継承しています。このクラスはフレームとタイトルを提供し、QSlider 、QScrollBar 、およびQDial を含んでいます。

また、valueChanged() シグナルと、QAbstractSlider およびQSpinBox の機能と同等の機能を持つパブリックなsetValue() スロットを提供しています。さらに、最小値と最大値の設定、スライダーウィジェットの表示の反転、キーバインディングの設定、および向きを設定するための、その他のいくつかのパブリックスロットも実装しています。

SlidersGroup クラスの実装

SlidersGroup::SlidersGroup(const QString &title, QWidget *parent)
    : QGroupBox(title, parent)
{
    slider = new QSlider;
    slider->setFocusPolicy(Qt::StrongFocus);
    slider->setTickPosition(QSlider::TicksBothSides);
    slider->setTickInterval(10);
    slider->setSingleStep(1);

    scrollBar = new QScrollBar;
    scrollBar->setFocusPolicy(Qt::StrongFocus);

    dial = new QDial;
    dial->setFocusPolicy(Qt::StrongFocus);

まず、適切なプロパティを持つスライダーのようなウィジェットを作成します。特に、各ウィジェットのフォーカスポリシーを設定します。Qt::FocusPolicy は、ウィジェットがキーボードフォーカスを取得する際に採用できるさまざまなポリシーを定義する列挙型です。Qt::StrongFocus ポリシーは、ウィジェットがタブキー操作とクリックの両方によってフォーカスを受け入れることを意味します。

    connect(slider, &QSlider::valueChanged, scrollBar, &QScrollBar::setValue);
    connect(scrollBar, &QScrollBar::valueChanged, dial, &QDial::setValue);
    connect(dial, &QDial::valueChanged, slider, &QSlider::setValue);
    connect(dial, &QDial::valueChanged, this, &SlidersGroup::valueChanged);

次に、ウィジェット同士を相互に接続し、いずれかの現在の値が変更された際に、それらが同期した状態を維持できるようにします。

dial のvalueChanged() シグナルをSlidersGroup のvalueChanged() シグナルに接続し、値の変更をアプリケーション内の他のウィジェット（つまり、コントロールウィジェット）に通知します。


    slidersLayout = new QBoxLayout(QBoxLayout::LeftToRight);
    slidersLayout->addWidget(slider);
    slidersLayout->addWidget(scrollBar);
    slidersLayout->addWidget(dial);
    setLayout(slidersLayout);
}

最後に、グループボックス内のスライダーウィジェットのレイアウトを作成します。まずはスライダーを水平に配置することから始めます。

void SlidersGroup::setValue(int value)
{
    slider->setValue(value);
}

setValue() スロットは、QSlider の値を設定します。QScrollBar およびQDial ウィジェットに対してsetValue()を明示的に呼び出す必要はありません。QSlider の値が変化すると、valueChanged()シグナルが発信され、ドミノ効果を引き起こすためです。

void SlidersGroup::setMinimum(int value)
{
    slider->setMinimum(value);
    scrollBar->setMinimum(value);
    dial->setMinimum(value);
}

void SlidersGroup::setMaximum(int value)
{
    slider->setMaximum(value);
    scrollBar->setMaximum(value);
    dial->setMaximum(value);
}

setMinimum() およびsetMaximum() スロットは、Window クラスによって、QSlider 、QScrollBar 、およびQDial ウィジェットの範囲を設定するために使用されます。

void SlidersGroup::invertAppearance(bool invert)
{
    slider->setInvertedAppearance(invert);
    scrollBar->setInvertedAppearance(invert);
    dial->setInvertedAppearance(invert);
}

void SlidersGroup::invertKeyBindings(bool invert)
{
    slider->setInvertedControls(invert);
    scrollBar->setInvertedControls(invert);
    dial->setInvertedControls(invert);
}

invertAppearance() およびinvertKeyBindings() スロットは、子ウィジェットのinvertedAppearance およびinvertedControls プロパティを制御します。

void SlidersGroup::setOrientation(Qt::Orientation orientation)
{
    slidersLayout->setDirection(orientation == Qt::Horizontal
                                ? QBoxLayout::TopToBottom
                                : QBoxLayout::LeftToRight);
    scrollBar->setOrientation(orientation);
    slider->setOrientation(orientation);
}

setOrientation() スロットは、レイアウトの方向とスライダーの向きを制御します。水平グループでは、スライダーは水平方向に配置され、上下に並べて配置されます。垂直グループでは、スライダーは垂直方向に配置され、横並びに配置されます。

サンプルプロジェクト @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.