Stacking widgets but both are visible

[sssupply]

I am trying to combine QSlider and QProgressBar to create a similar slider to Youtube's where it shows the progress of how much of the video is loaded but you can also drag the video position slider. I'm using a QStackedLayout with stacking mode set to StackAll but the progressbar which is underneath the slider is not visible. Does anyone know how to stack widgets on top of each other but make both visible? Here is my code:

class ProgressSlider(QStackedLayout):
    def __init__(self):
        self.container = QWidget()
        super().__init__(self.container)
        self.setStackingMode(QStackedLayout.StackAll)

        self.video_slider = VideoSlider(Qt.Horizontal) //inherits QSlider
        self.progress_bar = QProgressBar()
        self.progress_bar.setStyleSheet(self.get_progress_bar_style())

        self.addWidget(self.video_slider)
        self.addWidget(self.progress_bar)

[jsulm]

@sssupply You should rather inherit QWidget instead of QStackedLayout and use a QStackedLayout as layout for your widget.

[sssupply]

@jsulm
I am now inheriting QWidget but it didn't help with the issue. Also, you can see that I'm setting the background of the top widget (VideoSlider) to "transparent" but no luck. It makes the background transparent but just changes it to the color of the underlying ui, and not the bottom widget of the stackedlayout. I've noticed someone else ran into the same issue as me in this thread but no solution was found :/ Is there any way I can fix this by overriding paintEvent() in my QWidget class?

class ProgressSlider(QWidget):
    def __init__(self):
        super().__init__()
        self.stacked_layout = QStackedLayout(self)
        self.stacked_layout.setStackingMode(QStackedLayout.StackAll)

        self.video_slider = VideoSlider(Qt.Horizontal)
        self.progress_bar = QProgressBar()
        self.progress_bar.setStyleSheet(self.get_progress_bar_style())
        self.progress_bar.setMaximumHeight(10)

        self.stacked_layout.addWidget(self.video_slider)
        self.stacked_layout.addWidget(self.progress_bar)

    @staticmethod
    def get_progress_bar_style():
        return """
                 QProgressBar:horizontal {
                    background-color: transparent;
                    border: 0px solid #424242; 
                    height: 4px; 
                    border-radius: 2px;
                 }
               """

    def paintEvent(self, a0: QPaintEvent) -> None:
        style_option = QStyleOption()
        style_option.initFrom(self)
        painter = QPainter(self)
        self.style().drawPrimitive(QStyle.PE_Widget, style_option, painter, self)


class VideoSlider(QSlider):
    def __init__(self, direction):
        super().__init__(direction)
        self.setMaximumHeight(10)
        self.setStyleSheet(self.get_style_sheet())

    @staticmethod
    def get_style_sheet():
        return """
            QSlider::groove:horizontal { 
                background: rgba(100, 100, 100, 0);
                height: 4px; 
                border-radius: 4px;
            }
            
            QSlider::groove:horizontal:hover { 
                background-color: rgb(48,47,47);
                border: 0px solid #424242; 
                height: 6px; 
                border-radius: 4px;
            }
            
            QSlider::handle:horizontal { 
                background-color: rgb(239,82,82); 
                border: 2px solid rgb(239,82,82);  
                width: 5px; 
                height: 5px; 
                line-height: 5px; 
                margin-top: -2px; 
                margin-bottom: -2px; 
                border-radius: 4px; 
            }
            
            QSlider::handle:horizontal:hover { 
                background-color: rgb(239,82,82); 
                border: 2px solid rgb(239,82,82);  
                width: 5px; 
                height: 5px; 
                line-height: 5px; 
                margin-top: -2px; 
                margin-bottom: -2px; 
                border-radius: 4px; 
            }
            
            QSlider:sub-page:horizontal {
                background: rgb(239,82,82);  
            }
            """

[jsulm]

@sssupply Does it work if you do not apply any style-sheets?

[sssupply]

@jsulm If I don't apply a style sheet then I can't make the slider bar transparent to show the progress bar underneath