Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

QSlider increase handle size

I need badly to increase size of handle for my slider, but no css options can do this(styleSheet()). The default example from Qt docs didn't help me as well.

I have a slider like this: I have slider like this

I wish to increase the height of its handle, as shown on explanation image below, but I can't guess how to do it. Probably the only way is to subclass QAbstractSlider?

explanation image

Here is the stylesheet from my code:

                "QSlider::groove:horizontal {"
                "border: 1px solid #999999;"
                "height: 32px;" /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
                "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: 40px;"
                "margin: -20px 0;" /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
                "border-radius: 3px;}"
            );
like image 657
Preonix Avatar asked Dec 07 '17 09:12

Preonix


2 Answers

Use this stylesheet:

.QSlider {
    min-height: 68px;
    max-height: 68px;
    background: #5F4141;
}

.QSlider::groove:horizontal {
    border: 1px solid #262626;
    height: 5px;
    background: #393939;
    margin: 0 12px;
}

.QSlider::handle:horizontal {
    background: #22B14C;
    border: 5px solid #B5E61D;
    width: 23px;
    height: 100px;
    margin: -24px -12px;
}

It will produce the following:

image

Please note the the height of the slider is made constant by setting both min-height and max-height to the same value.

like image 163
scopchanov Avatar answered Nov 07 '22 15:11

scopchanov


I copied your exact code into a form in Qt Designer. The slider handle looks large enough.

However, when adding a layout, the whole slider's size isn't large enough to show the complete handle. I simply added this:

QSlider {
    height: 80px;
}

And get this result:

Form Slider Screenshot

like image 2
king_nak Avatar answered Nov 07 '22 14:11

king_nak