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.

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

Answer 1

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