How to adjust a QSlider's handle?

AaronD picture AaronD · Jun 28, 2016 · Viewed 7.2k times · Source

I'm writing an app for a touchscreen, and the default handle is too small to grab reliably, so I want to make it bigger. According to the official documentation, several answers on SE, and a couple of other forums, this ought to work in a QWidget's constructor:

sliderGrandMaster = new QSlider(Qt::Vertical, panelRight);
sliderGrandMaster->setGeometry(          appdata->buttonBorder ,    //Left
                   buttonTopRight +      appdata->buttonBorder ,    //Top
                        halfwidth - (2 * appdata->buttonBorder),    //Width
            buttonRemainingHeight - (2 * appdata->buttonBorder));   //Height
sliderGrandMaster->setRange(0, RANGE_MAX);
sliderGrandMaster->setTickInterval(RANGE_MAX / 10);
sliderGrandMaster->setTickPosition(QSlider::TicksBothSides);
QString temp =  QString("handle:vertical { background: green; height: %1px; margin: 0 -%2px; }")
                .arg(buttonRemainingHeight / 5)
                .arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);

But it seems to have no effect. The handle is the same small size regardless of what values I put in the stylesheet, and it's not even green.

With my values at runtime, temp ends up being handle:vertical { background: green; height: 66px; margin: 0 -32px; }. The size of the slider is 94px wide by 331px tall.

Am I missing something?


Edit:

This:

QString temp =  QString("QSlider::handle { background: green; height: %1px; width: %1px; margin: 0 -%2px; }")
                .arg(buttonRemainingHeight / 5)
                .arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);

at least got it green. But the size is still wrong. Qt version 5.4.2

Answer

dydil picture dydil · Jun 28, 2016

You can change the size of the handle just with a simple stylesheet. Example :

QSlider

Is done with the following stylesheet :

QSlider::groove:horizontal
{
    border:none;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 10px;
}  

QSlider::sub-page
{
    background: rgb(164, 192, 2);
}

QSlider::add-page 
{
    background: rgb(70, 70, 70);
}

QSlider::handle
{
    background: white;
    border: 3px solid black;
    width: 60px; // **Change the width here**
    margin: -30px 0;
}