In pyqt6, why QSlider cannot see handler after using qss?

Question

class VideoProgressSlider(QSlider):
    def __init__(self, orientation: Qt.Orientation = Qt.Orientation.Horizontal):
        super().__init__(orientation)
        self.__initUI()

    def __initUI(self):
        self.setMinimumHeight(100)
        self.setStyleSheet(f'''
            QSlider::groove:horizontal {{ 
                height: 12px; 
                left: 0px; 
                right: 0px; 
                border:0px;    
                border-radius:6px;
                background:rgba(0,0,0,50);
             }} 
             QSlider::handle:horizontal{{ 
                width: 8px;
                height: 16px;
                margin-top: -8px; 
                margin-left: 1px; 
                margin-bottom: -8px; 
                margin-right: 1px;
                # core code which results in the question
                border-image: {os.path.join('../../Resources', "circle.png")};
                border: 8px solid;
            }} 
            QSlider::sub-page:horizontal{{
                border:0px;    
                border-radius:6px;
                background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #12b9ff, stop: 1.0 #015eea);
            }}
        ''')
        pass

    def mousePressEvent(self, event: QMouseEvent) -> None:
        # Make sure the handle will go to the position where I clicked.
        # Omitted.
        pass

As I provide above, there is a new QSlider which was modified the style sheet and added some functions. And this is the effect Pic.

Effect

I have no idea how to fix it.
Hoping for solutions.

I try to use
border-image: {os.path.join('../../Resources', "circle.png")};,
border-image: url({os.path.join('../../Resources', "circle.png")});,
border-image: url(:/{os.path.join('../../Resources', "circle.png")});
and even the full path.
But none of them is useful.
The handle picture which is named circle.png is 16px(I even tried 5px), and the path was verified by using the terminal to access.

Additional Information
This is part of the tree structure of the project.

D:\...\CODE\GUI
│  ...
│
├─Dev
│  ├─Login
│  │    ...
│  │
│  ├─Modules
│  │    ...
│  │
│  ├─MyWidgets
│  │    MyMediaPlayWidget.py
│  │    VideoProgressSlider.py
│  │    ...
│  │
│  └─Utils
│       ...
│ 
└─Resources
      circle.png
      ...

Typo: you must use quotes for paths, and they should always be as `url()`. `border-image: url("{os.path.join('../../Resources', "circle.png")}")`. Note that you should not use hardcoded relative paths, always use references to the `__file__` to create the final path. — musicamante, Mar 22 '23 at 20:33
@musicamante thank you so much for pointing this out. but I tried to wrap the path with `url("")` and it seems like `border-image: url("D:\...\Code\GUI\Resources\circle.png");`. I cannot see the handle of the slide. I updated the question and posted part of the project structure. — x0rb64, Mar 23 '23 at 07:57
Ensure that you're properly constructing the correct path, and provide a valid reproducible example of how you do it, because if you do use the `url("...")` syntax and it doesn't work, either the path is invalid, or the image isn't. Remember what said above: you should not use hardcoded relative paths like `../..`, as they become relative to the working dir. — musicamante, Mar 23 '23 at 12:01

antoine lecoq · Answer 1 · 2023-04-07T00:46:53.317

I found a solution just use : "QSlider::handle {image: url('path');}" and not background-image or border-image. Here is an example i made (i had to reformat the absolute path to get it right, but i dont succeed to change the size of the image if you can help me) :

self.script_dir = os.path.dirname(__file__)
path_to_image = os.path.join(self.script_dir, "../../ressources/Icon/potar1.png")
abspath1 = os.path.abspath(path_to_image)
abspath1 = abspath1.replace("\\", "/")
print("chemin potar:" ,abspath1)
    
self.myslider.setStyleSheet(f"QSlider::handle {{height:227px;width:109px;image: url({abspath1});}}"
        "QSlider::add-page{}"
        "QSlider::sub-page {background-color: green;}")

In pyqt6, why QSlider cannot see handler after using qss?

1 Answers1