Qt 4.8 QSlider handle size

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:
Screenshot 2022-04-05 at 17.02.11.png

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:
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 :-(