How to adjust a QSlider's handle?

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

Did you miss `QSlider::handle:vertical` in your style sheet? From https://forum.qt.io/topic/36346/solved-qslider-handle-size-after-stylesheet/5, but more information here http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qslider. — maxik, Jun 28 '16 at 09:04
@maxik `temp = "QSlider::handle:vertical { }"` doesn't work either. — AaronD, Jun 28 '16 at 09:21

dydil · Answer 1 · 2016-06-28T09:27:31.513

3

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;
}

edited Jun 28 '16 at 09:27

answered Jun 28 '16 at 09:06

dydil

949
7
20

The height and width ratio in the style sheet doesn't seem to match the picture's. Anyway, this should be the whole solution. – maxik Jun 28 '16 at 09:15
@maxik I've never seen an actual example of how to use that format. It's always been loose code like is presented here. How do I add it to an existing (and somewhat large) project? – AaronD Jun 28 '16 at 09:16
@AaronD You do already in your provided code... may I quote you: `sliderGrandMaster->setStylesheet(...);`. Place the content inside the brakets or put it there using a `QString` or something. For further readings http://doc.qt.io/qt-4.8/stylesheet.html. – maxik Jun 28 '16 at 09:19
@maxik Okay, I guess the formatting is throwing me off. It's often formatted like C++ code itself with multiple lines and indentation and highlighting, so it looks like it should be compiled somehow instead of interpreted at runtime. Nevertheless, I tried including the `QSlider::` bit as well, to fully specify it, and that doesn't work either. – AaronD Jun 28 '16 at 09:24
@maxik it is because of the margins, I just noticed that the height actually has no effect. – dydil Jun 28 '16 at 09:27
@dydil May you confirm that your width is working properly? – maxik Jun 28 '16 at 09:35
@maxik I didn't precisely count the pixel, but it is about the same size as a 60px wide button above it and it changes when the width is changed. – dydil Jun 28 '16 at 09:42

maxik · Accepted Answer · 2016-06-28T10:25:03.433

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.

Looks like that worked. Required parameters for a vertical slider are `groove.background`, `groove.width`, `handle.background`, `handle.height`, and `handle.margin`. Thanks! — AaronD, Jun 28 '16 at 10:36
You might accept an answer then, two correct so far ;) It still puzzles me, this behaviour... strange. I should dig into that. — maxik, Jun 28 '16 at 11:11

How to adjust a QSlider's handle?

Edit:

2 Answers2