How to add image on the sides of a QSlider

Question

I have redesigned and implemented a QSlider using its Stylesheets.

I could not find how to place an image before and after (left or right, top or bottom) the slider itself though.

Ex:

Slider:

----00---------------

Image Left:

qqqqq

Image Right:

ddddd

Result:

qqqqq----00---------------ddddd

I am currently using a QHBoxLayout and insert these images using QLabels but it does not seem like the right or the best way.

How can I else add these images correctly?

Thanks!

Answer 1

You can actually achieve that with only style sheets and the border-image property on the groove subcontrol.

For example with a border image like this:

To better see what goes where, B is 10 pixel wide, the space is 2, and A is 12 pixel wide.

QSlider::groove {      
   border-image: url(:/slider-decoration.png) 0 12 0 10;
   border-left: 10px solid transparent;
   border-right: 12px solid transparent;
}
QSlider::handle {
    width: 8px;
    background-color: green;
}

Which gives you what you expect:

This solution has a small problem, though. The mouse ignores the presence of the border, and there is an offset near both ends between the handle position and the mouse position. So, to avoid that, the handle has to go all the way to either side, but we add a transparent border to it that make it look like it stops just before the image borders:

QSlider::groove {      
   border-image: url(:/slider-decoration.png) 0 12 0 10;
   border-left: 10px;
   border-right: 12px;
}
QSlider::handle {
    width: 8px;
    /* add borders to the handle that will sit above the groove border */
    border-right: 10px solid transparent;
    border-left: 12px solid transparent;       

    /* negative margins to allow the handle borders 
       to go past the groove borders */
    margin-right: -10px;    
    margin-left: -12px;
    background-color: green;
    /* make the background color fill the content, not the border */
    background-clip: content;
}

Answer 2

The three "body parts" of the slider are the groove, add-page, and sub-page. All of these are actually within the bounds of the QSlider, so styling gives you an effect like the one in this blog post. Using stylesheets will give you the effect:

qqqq00ddddddddddddddd    

instead of

qqqqq----00---------------ddddd

which you can achieve by simply sticking with your QHBoxLayout strategy.