Qt 4.8 QSlider handle size

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

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