Important: Please read the Qt Code of Conduct -

How Do I Mask Image Used for QSlider Handle?

  • I am using a CSS to set images used for a QSlider groove and handle. That works great. What I need to do is be able to set a mask on the image used for the handle of the QSlider. How do I do that? The normal ::setMask() call on the QSlider sets the mask for the groove's image. I can't seem to figure out how to mask the handle's image. Thanks in advance.

    CSS code for setting QSlider images:

    QSlider#VideoPositionSlider::groove:horizontal {
    image: url(:/images/Graphics-English/VideoPositionSliderGroove.PNG);

    QSlider#VideoPositionSlider::handle:horizontal {
    image: url(:/images/Graphics-English/VideoPositionSliderHandle.PNG);

    [EDIT: @-Tags for code formatting added, Volker]

  • from my mind, does the handle help?
    @(" QSlider:vertical { width: 50px; }
    QSlider::groove:horizontal { border: 1px solid black; border-radius: 3px; width: 6px; }
    QSlider::handle:horizontal { height: 25px; margin: 0 -22px; image: url(':/images/Graphics-English/VideoPositionSliderHandle.PNG'); }


Log in to reply