Qt 4.8 QSlider handle size

[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.

[hskoglund]

I see, perhaps there’s a difference between 4.8.4 and 4.8.7. Is it possible for you to upgrade your version of Qt to 4.8.7?

[SPlatten]

@hskoglund , unfortunately not. I have no control over the clients systems and the versions of Qt used.

[hskoglund]

No worries, I found Qt 4..8.4 and installed it with MinGW gcc 4.4.0.
Then I created a directory C:\Main with just a file main.pro containing this line:

SOURCES += main.cpp

then created a main.cpp with a copy of my code from my post above (about 2 hours ago). Then i typed:
C:\Qt\4.8.4\bin\qtvars.bat
and got this:

Setting up a MinGW/Qt only environment...
-- QTDIR set to C:\Qt\4.8.4
-- PATH set to C:\Qt\4.8.4\bin
-- Adding C:\MinGW\bin to PATH
-- Adding C:\Windows\System32 to PATH
-- QMAKESPEC set to win32-g++```

then i typed
qmake
make
and gpt this:

mingw32-make -f Makefile.Debug
mingw32-make[1]: Entering directory `C:/Main'
C:\Qt\4.8.4\bin\moc.exe -DUNICODE -DQT_LARGEFILE_SUPPORT -DQT_DLL -DQT_GUI_LIB -
DQT_CORE_LIB -DQT_HAVE_MMX -DQT_HAVE_3DNOW -DQT_HAVE_SSE -DQT_HAVE_MMXEXT -DQT_H
AVE_SSE2 -DQT_THREAD_SUPPORT -DQT_NEEDS_QMAIN -I"..\Qt\4.8.4\include\QtCore" -I"
..\Qt\4.8.4\include\QtGui" -I"..\Qt\4.8.4\include" -I"..\Qt\4.8.4\include\Active
Qt" -I"debug" -I"..\Qt\4.8.4\mkspecs\win32-g++" -D__GNUC__ -DWIN32 main.cpp -o d
ebug\main.moc
g++ -c -pipe -g -frtti -fexceptions -mthreads -Wall -Wextra -DUNICODE -DQT_LARGE
FILE_SUPPORT -DQT_DLL -DQT_GUI_LIB -DQT_CORE_LIB -DQT_HAVE_MMX -DQT_HAVE_3DNOW -
DQT_HAVE_SSE -DQT_HAVE_MMXEXT -DQT_HAVE_SSE2 -DQT_THREAD_SUPPORT -DQT_NEEDS_QMAI
N -I"..\Qt\4.8.4\include\QtCore" -I"..\Qt\4.8.4\include\QtGui" -I"..\Qt\4.8.4\in
clude" -I"..\Qt\4.8.4\include\ActiveQt" -I"debug" -I"..\Qt\4.8.4\mkspecs\win32-g
++" -o debug\main.o main.cpp
g++ -mthreads -Wl,-subsystem,windows -o debug\Main.exe debug/main.o  -L"c:\Qt\4.
8.4\lib" -lmingw32 -lqtmaind -lQtGuid4 -lQtCored4
mingw32-make[1]: Leaving directory `C:/Main

then when i type
C:\Main\debug\main.exe
my app looks the same as the screenshot above (i.e. with just two sliders visibile), so 4.8.4 looks the same 4.8.7 (for this project anyway).

Perhaps you are using a different compiler than MinGW gcc 4.4.0?

[SPlatten]

@hskoglund, the compiler is:

gcc (Gentoo 4.6.3 p1.13, pie-0.5.2) 4.6.3
Copyright (C) 2011 Free Software Foundation, Inc.