Qt 4.8 QSlider handle size

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:
Screenshot 2022-04-06 at 00.04.35.png

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:
Screenshot 2022-04-06 at 08.17.58.png

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.

hskoglund

Ok that could explain the different behavior, I never tested on Gentoo, sorry :-(

SPlatten

@hskoglund , I thought I would take another look and I was wrong, looking at Qt Build & Run the compilers are:

Auto-detected
    g++ (gnat-2014-4-x86)
    gcc (x86 64bit in /usr/bin)
    gcc (x86 32bit in /usr/bin)

I then cleaned and rebuilt and can see in the Compiler Output it is using g++. I then opened a terminal and typed: g++ --version:

g++ (Gentoo 4.6.3 p1.13, pie-0.5.2) 4.6.3

So it looks like it is the same version after all.

hskoglund

Hi I googled that Gentoo release and it seems that there's no online installation of Qt 4.8.4 available for it, so I think your version of Qt 4.8.4 is custom built, i.e. built by downloading the source for Qt 4.8.4 and compiling. And in that process some features might have been dropped, for example z-order for widgets.
So I simplified my example to not to rely on a working z-order, please try this version:

#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);

        pSlider1Follower = new QSlider(Qt::Horizontal,this);
        pSlider1Follower->setTickPosition(QSlider::TicksBothSides);
        pSlider1Follower->setTickInterval(2);

        pSlider2Follower = new QSlider(Qt::Vertical,this);
        pSlider2Follower->setTickPosition(QSlider::TicksBothSides);
        pSlider2Follower->setTickInterval(2);

        pSlider1 = new QSlider(Qt::Horizontal,this);
        pSlider2 = new QSlider(Qt::Vertical,this);

        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"

If it bulds ok, lets' debug:

How many sliders do you see?
If you move one of them, does it cause any other slider to move as well?
If you move one of them, does it cause any other slider to change in size?

SPlatten

@hskoglund , I’ll try this tomorrow and get back to you.

SPlatten

@hskoglund

2 Sliders, 1 horizontal and 1 vertical, with two handles on each, the horizontal slider handles do not look correct.

2 . Moving the vertical slider causes both vertical handles to move together, the coloured square handle is correct orientation, this also increases height of horizontal slider.

Moving the horizontal slider increases the width of the vertical slider, but the handles are not together, one is the correct orientation but centered.

Vertical handles are in sync. Horizontal are not.