Qt 4.8 QSlider handle size

[hskoglund]

Hi, I dug up some code of mine for customizing the slider so it looks like a slider on the sound-mixing board in a musical studio: first you create a vanilla QSlider then you call this function:

void MainWindow::customizeSlider(QWidget* pSlider, QColor c, int nWidthInPixels, int nHeightInPixels)
{
    int nnBorderWidth  = 1;
    int nnBorderRadius = 7;  // for nice rounded corners
    QColor ccBorder("grey");
    int nnLineWidth    = 2;
    int nnMidLineWidth = 0;

    QSlider* pTheRealSlider = dynamic_cast<QSlider*>(pSlider);
    if (nullptr == pTheRealSlider)
        return; // there was no QSlider* present, so skip this

// construct and set the style sheet (2 parts, one for the groove and one for the handle)
    pTheRealSlider->setStyleSheet(QString(
        "QSlider::groove { background: transparent; height: %1px; } "
        "QSlider::handle { background: %2; border-radius: %3px; border: %4px solid %5; width: %6px;}")
        .arg(nHeightInPixels).arg(c.name()).arg(nnBorderRadius).arg(nnBorderWidth).arg(ccBorder.name()).arg(nWidthInPixels));

// need to recreate the QSlider's groove? (the original is now invisible due to the stylesheet applied above)
    QString sFrameObjectName = pTheRealSlider->objectName() + "Frame";  // we'll be using a QFrame
    if (nullptr == pTheRealSlider->parentWidget()->findChild<QFrame*>(sFrameObjectName))
    {
    // new up a QFrame to act as a surrogate groove, use the same parent and geometry as the slider
        QFrame* pFrame = new QFrame(pTheRealSlider->parentWidget());
        pFrame->setGeometry(pTheRealSlider->geometry());
        pFrame->setObjectName(sFrameObjectName);
        pFrame->setFrameStyle((Qt::Horizontal == pTheRealSlider->orientation()) ? QFrame::HLine : QFrame::VLine);
        pFrame->setFrameStyle(pFrame->frameStyle() | QFrame::Sunken);
        pFrame->setLineWidth(nnLineWidth);
        pFrame->setMidLineWidth(nnMidLineWidth);

    // finally, change the z-order so that our custom groove is drawn under the handle (just like the real groove)
        pFrame->stackUnder(pTheRealSlider);
    }
}

This works in Qt5 so with a bit of luck it works in Qt4 also.
Try different width and height arguments, it should change the handle size.

Edit: you can toss that dynamic_cast<> , it was there so that I can iterate over all the widgets in my mainwindow and just change the sliders.

[SPlatten]

@hskoglund , the background colour of the handle does change, but the width and height are not effected.

[hskoglund]

Hi, maybe it's because you on Qt4? It seems to work fine in Qt5:
J just tried a simple test project in Qt 5.15.2: create a new empty widget app and change your mainwindow.cpp to look like this:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "qslider.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    auto pSlider1 = new QSlider(Qt::Horizontal,this);
    pSlider1->setGeometry(100,110,600,120);

    auto pSlider2 = new QSlider(Qt::Horizontal,this);
    pSlider2->setGeometry(100,380,600,120);

// customizing lambda
    auto customizeSlider = [](QSlider* pSlider, QColor c,int nWidthInPixels, int nHeightInPixels)
    {
        int nnBorderWidth  = 1;
        int nnBorderRadius = 7;  // for nice rounded corners
        QColor ccBorder("grey");

        // construct and set the style sheet (2 parts, one for the groove and one for the handle)
        pSlider->setStyleSheet(QString(
            "QSlider::groove { background: transparent; height: %1px; } "
            "QSlider::handle { background: %2; border-radius: %3px; border: %4px solid %5; width: %6px;}")
            .arg(nHeightInPixels).arg(c.name()).arg(nnBorderRadius).arg(nnBorderWidth).arg(ccBorder.name()).arg(nWidthInPixels));
    };

    connect(pSlider1,&QSlider::valueChanged,this,[customizeSlider,pSlider2] (int n) { customizeSlider(pSlider2,"red"  ,n + 50,n + 20); });
    connect(pSlider2,&QSlider::valueChanged,this,[customizeSlider,pSlider1] (int n) { customizeSlider(pSlider1,"green",n + 50,n + 20); });

}

MainWindow::~MainWindow()
{
    delete ui;
}

when I run it (screndump):

[SPlatten]

@hskoglund , thats what I was afraid of.

[hskoglund]

No reason to be afraid :-) Just tested on Qt 4.8.7:
create a main.pro containing this line:

SOURCES += main.cpp

then create a main.cpp that looks like this:

#include <QApplication>
#include <qslider.h>

class Window : public QWidget
{
    Q_OBJECT

public:
    Window()
    {
        pSlider1 = new QSlider(Qt::Horizontal,this);
        pSlider1->setGeometry(10,110,500,130);

        pSlider2 = new QSlider(Qt::Horizontal,this);
        pSlider2->setGeometry(10,330,500,130);

        connect(pSlider1,SIGNAL(valueChanged(int)),this,SLOT(valueChanged1(int)));
        connect(pSlider2,SIGNAL(valueChanged(int)),this,SLOT(valueChanged2(int)));
    }

    void customizeSlider(QSlider* pSlider, QColor c,int nWidthInPixels, int nHeightInPixels)
    {
        int nnBorderWidth  = 1;
        int nnBorderRadius = 7;  // for nice rounded corners
        QColor ccBorder("grey");

        pSlider->setStyleSheet(QString(
        "QSlider::groove { background: transparent; height: %1px; } "
        "QSlider::handle { background: %2; border-radius: %3px; border: %4px solid %5; width: %6px;}")
        .arg(nHeightInPixels).arg(c.name()).arg(nnBorderRadius).arg(nnBorderWidth).arg(ccBorder.name()).arg(nWidthInPixels));
    };

    QSlider* pSlider1;
    QSlider* pSlider2;

public slots:
    void valueChanged1(int value) { customizeSlider(pSlider2,QColor("green"), 60 + value, 30 + value); }
    void valueChanged2(int value) { customizeSlider(pSlider1,QColor("red"  ), 60 + value, 30 + value); }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    Window window;
    window.show();
    return app.exec();
}

#include "main.moc"

then invoke the qtvars.bat, qmake and make and you get this: (very similar to Qt5):

[SPlatten]

@hskoglund , in your example the orientation of both sliders is horizontal, try setting one of those to vertical, I don't understand what I've done wrong, what I'm seeing in the Application Output, for a vertical slider:

QSlider::handle {width:10px;height:40px;}

For horizontal slider:

QSlider::handle {width:40px;height:10px;}

However when rendered they look like they are exactly the wrong way around and I just can't see why. In my set-up configuration file I've swapped around the width and height for each so I see for vertical:

QSlider::handle {width:40px;height:10px;}

For horizontal slider:

QSlider::handle {width:10px;height:40px;}

However when rendered there is no difference form the previous where the width and heights are swapped.

I've just tried setting very large figures for width and height and they aren't working, the backgound colour style does work but the width and height have no effect.

I don't have groove in the style, is that relevant?

[hskoglund]

Hi, oh but you have to groove in the stylesheet otherwise you'll get the nothing happens effect. This is probably why it doesn't work for you :-(

[SPlatten]

@hskoglund , I wish I could say that solved the problem, it has not.

[hskoglund]

Hmm, vertical sliders work the same for me on Qt 4.8.7, I changed main.cpp to:

#include <QApplication>
#include <qslider.h>

class Window : public QWidget
{
    Q_OBJECT

public:
    Window()
    {
        pSlider1 = new QSlider(Qt::Vertical,this);
        pSlider1->setGeometry(110,10,130,500);

        pSlider2 = new QSlider(Qt::Vertical,this);
        pSlider2->setGeometry(330,10,130,500);

        connect(pSlider1,SIGNAL(valueChanged(int)),this,SLOT(valueChanged1(int)));
        connect(pSlider2,SIGNAL(valueChanged(int)),this,SLOT(valueChanged2(int)));
    }

    void customizeSlider(QSlider* pSlider, QColor c,int nWidthInPixels, int nHeightInPixels)
    {
        int nnBorderWidth  = 1;
        int nnBorderRadius = 7;  // for nice rounded corners
        QColor ccBorder("grey");

        pSlider->setStyleSheet(QString(
        "QSlider::groove { background: transparent; width: %1px; } "
        "QSlider::handle { background: %2; border-radius: %3px; border: %4px solid %5; height: %6px;}")
        .arg(nHeightInPixels).arg(c.name()).arg(nnBorderRadius).arg(nnBorderWidth).arg(ccBorder.name()).arg(nWidthInPixels));
    };

    QSlider* pSlider1;
    QSlider* pSlider2;

public slots:
    void valueChanged1(int value) { customizeSlider(pSlider2,QColor("green"), 30 + value, 80 + value); }
    void valueChanged2(int value) { customizeSlider(pSlider1,QColor("red"  ), 30 + value, 80 + value); }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    Window window;
    window.show();
    return app.exec();
}

#include "main.moc"

and I get this:

Are you on Qt 4.8..7 also?

[SPlatten]

@hskoglund , can you make your examples a bit more obvious? Make the handle horizontal wide and thin, the vertical handle thin and tall ?

I want my sliders to look like sliders with the default groove and ticks.

[hskoglund]

Hi, I simplified, Edit: removed the colors so that the sliders look more standard sliders :-)

#include <QApplication>
#include <qslider.h>

class Window : public QWidget
{
    Q_OBJECT

// setup 2 real sliders and 2 "followers" that are stacked under the real ones
    QSlider* pSlider1;
    QSlider* pSlider1Follower;
    QSlider* pSlider2;
    QSlider* pSlider2Follower;

public:
    Window()
    {
        pSlider1 = new QSlider(Qt::Horizontal,this);
        pSlider1->setGeometry(30,300,600,40);

        pSlider1Follower = new QSlider(Qt::Horizontal,this);
        pSlider1Follower->setGeometry(30,300,600,40);
        pSlider1Follower->setTickPosition(QSlider::TicksBothSides);
        pSlider1Follower->setTickInterval(2);
        pSlider1Follower->setSingleStep(1);
        pSlider1Follower->stackUnder(pSlider1);

        pSlider2 = new QSlider(Qt::Vertical,this);
        pSlider2->setGeometry(660,30,40,600);

        pSlider2Follower = new QSlider(Qt::Vertical,this);
        pSlider2Follower->setGeometry(660,30,40,600);
        pSlider2Follower->setTickPosition(QSlider::TicksBothSides);
        pSlider2Follower->setTickInterval(2);
        pSlider2Follower->setSingleStep(1);
        pSlider2Follower->stackUnder(pSlider2);

        connect(pSlider1,SIGNAL(valueChanged(int)),this,SLOT(valueChanged1(int)));
        connect(pSlider2,SIGNAL(valueChanged(int)),this,SLOT(valueChanged2(int)));

    // do an initial update/refresh
        valueChanged1(0);
        valueChanged2(0);
    }

public slots:
    void valueChanged1(int value)
    {
        pSlider1Follower->setValue(value);

        pSlider2->setStyleSheet(QString("QSlider::groove { background: transparent; width: 40px; } "
       "QSlider::handle { background: #eeeeee; border:1px solid grey; height: %1px;}").arg(2 * value + 10));
    }

    void valueChanged2(int value)
    {
        pSlider2Follower->setValue(value);

        pSlider1->setStyleSheet(QString("QSlider::groove { background: transparent; height: 40px; } "
       "QSlider::handle { background: #eeeeee; border:1px solid grey; width: %1px;}").arg(2 * value + 10));
    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    Window window;
    window.show();
    return app.exec();
}

#include "main.moc"

and now it looks like this:

[SPlatten]

@hskoglund , ok, now that looks like what I'm seeing however what I am trying to achieve is a taller handle on the horizontal slider and a wider handler on the vertical, which will not happen.

[hskoglund]

Hi, try:

#include <QApplication>
#include <qslider.h>

class Window : public QWidget
{
    Q_OBJECT

// setup 2 real sliders and 2 "followers" that are stacked under the real ones
    QSlider* pSlider1;
    QSlider* pSlider1Follower;
    QSlider* pSlider2;
    QSlider* pSlider2Follower;

public:
    Window()
    {
        setGeometry(130,130,860,660);

        pSlider1 = new QSlider(Qt::Horizontal,this);
        pSlider1->setGeometry(30,300,600,230);

        pSlider1Follower = new QSlider(Qt::Horizontal,this);
        pSlider1Follower->setGeometry(30,300,600,230);
        pSlider1Follower->setTickPosition(QSlider::TicksBothSides);
        pSlider1Follower->setTickInterval(2);
        pSlider1Follower->setSingleStep(1);
        pSlider1Follower->stackUnder(pSlider1);

        pSlider2 = new QSlider(Qt::Vertical,this);
        pSlider2->setGeometry(660,30,230,600);

        pSlider2Follower = new QSlider(Qt::Vertical,this);
        pSlider2Follower->setGeometry(660,30,230,600);
        pSlider2Follower->setTickPosition(QSlider::TicksBothSides);
        pSlider2Follower->setTickInterval(2);
        pSlider2Follower->setSingleStep(1);
        pSlider2Follower->stackUnder(pSlider2);

        connect(pSlider1,SIGNAL(valueChanged(int)),this,SLOT(valueChanged1(int)));
        connect(pSlider2,SIGNAL(valueChanged(int)),this,SLOT(valueChanged2(int)));

    // do an initial update/refresh
        valueChanged1(0);
        valueChanged2(0);
    }

public slots:
    void valueChanged1(int value)
    {
        pSlider1Follower->setValue(value);

        pSlider2->setStyleSheet(QString("QSlider::groove { background: transparent; width: %1px; } "
       "QSlider::handle { background: #eeeeee; border:1px solid grey; height: %2px;}").arg(value + 30).arg(value * 2 + 10));

        pSlider2->setGeometry(660,30,2 * value + 30,600);
        pSlider2Follower->setGeometry(660,30,2 * value + 30,600);
    }

    void valueChanged2(int value)
    {
        pSlider2Follower->setValue(value);

        pSlider1->setStyleSheet(QString("QSlider::groove { background: transparent; height: %1px; } "
       "QSlider::handle { background: #eeeeee; border:1px solid grey; width: %2px;}").arg(value + 30).arg(value * 2 + 10));

        pSlider1->setGeometry(30,300,600,2 * value + 30);
        pSlider1Follower->setGeometry(30,300,600,2 * value + 30);
    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    Window window;
    window.show();
    return app.exec();
}

#include "main.moc"

to get this:

[SPlatten]

@hskoglund , your handles look like they both need rotating 90 degrees.

The CSS I'm using:

For Vertical:

QSlider::handle:vertical {width:80px;height10px;}

For Horizontal:

QSlider::handle:horizontal {width:10px;height:80px;}

If I add:

QSlider::groove:vertical {background: transparent;}

I get nothing displayed at all.

[hskoglund]

When you run my example, does it work?

[SPlatten]

@hskoglund , I'm not sure what you are trying to achieve in your code, I just typed it in and run and it looks very wrong. What is the purpose of the sliders on top of sliders?

I can't be distracted by this, it isn't right and the results are still not right.

When I launch the application I see four sliders, two on tope of the first two, with handles in different orientations, the vertical slider has a square handle that is wider than the handle it overlaps, the handle underneath has a texture (grip) to it but it appears to be rounded and vertical.

[hskoglund]

Aha, you mean my screenshot disagrees with your result? Are you also on Qt 4.8.7?

[SPlatten]

@hskoglund , no, its Qt 4.8.4

[hskoglund]

Hmm 4.8.4 should look the same as 4.8.7.
If you create a new project and copy in my code above verbatim into your main.cpp, does it look the same as my screenshot when you run it?

[SPlatten]

@hskoglund I've done that and it doesn't. The sliders are visible one of top of the other with different handles on each.