How to adjust a QSlider's handle? - c++

Question

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 1

You can change the size of the handle just with a simple stylesheet. Example :
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;
}

Answer 2

Ok, using Qt 5.6.1 I got some progress on this. The following code
QSlider* slider = new QSlider(this);
slider->setOrientation(Qt::Horizontal);
slider->setStyleSheet("QSlider::groove:horizontal { "
"border: 1px solid #999999; "
"height: 20px; "
"background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); "
"margin: 2px 0; "
"} "
"QSlider::handle:horizontal { "
"background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f); "
"border: 1px solid #5c5c5c; "
"width: 30px; "
"margin: -2px 0px; "
"} ");
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(slider);
layout->addWidget(new QSlider(Qt::Horizontal, this));
setLayout(layout);
may be placed into an emty QWidget to work. It simply adds two QSliders, one of which is modified using a style sheet.
As you may see, I used to change the groove too and it is working as intended. But there are strange issues which could be a bug at all. Try commenting out some properties of the groove style sheet, like border, background and margin. If there are no effective properties, the width property of the handle is dropped. As I cannot find any constraint in the documentation, I wonder why this happens.
Also note the issues drawing the border around the handle. Seems to need some more fine tuning. ;)
Summing things up the quick solution for you should be added some default properties for the groove.