Search code examples
c++qtqtstylesheetsqslider

QSlider increase handle size


How do I increase the height of this slider's handle:

I have slider like this

As shown here:

explanation image

Is subclassing QAbstractSlider the only way?

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

Solution

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