How to make the tip of a QSlider in PySide2 look like a triangle?

[makalidap]

I want to make the end of QSlider triangular like in this

, but I couldn't do it. When I use the code self.mindelayclicki.setTickPosition(QSlider.TicksBelow) it becomes triangular, but I want it to be included in the stylesheet I added, and I don't want it to be in the red area.

from PySide2.QtWidgets import QMainWindow, QApplication, QSlider
from PySide2.QtGui import Qt

from sys import exit, argv


class MyWin(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setFixedSize(400, 400)
        self.mindelayclicki = QSlider(Qt.Horizontal, self)
        self.mindelayclicki.setGeometry(20, 100, 350, 25)
        self.mindelayclicki.setStyleSheet("""
            QSlider::groove:horizontal {
                height: 8px;
                margin: 0px;
                background-color: #E7EAEA;
                border:1px solid #D6D6D6;
            }
            QSlider::handle:horizontal {
                height: 20px;
                width: 12px;
                margin: -12px 0px -12px 0px;
                background-color: #007AD9;
            }
                """)
        self.show()
app = QApplication(argv)
window = MyWin()
exit(app.exec_())

 

[Phro0244]

To make the tip of a QSlider in PySide2 look like a triangle, you can use the ::sub-page and ::add-page pseudo-states in your stylesheet. Here's an updated code snippet that shows how to achieve this:

from PySide2.QtWidgets import QMainWindow, QApplication, QSlider
from PySide2.QtGui import Qt

from sys import exit, argv


class MyWin(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setFixedSize(400, 400)
        self.mindelayclicki = QSlider(Qt.Horizontal, self)
        self.mindelayclicki.setGeometry(20, 100, 350, 25)
        self.mindelayclicki.setStyleSheet("""
            QSlider::groove:horizontal {
                height: 8px;
                margin: 0px;
                background-color: #E7EAEA;
                border: 1px solid #D6D6D6;
            }
            QSlider::sub-page:horizontal {
                background-color: #007AD9;
            }
            QSlider::add-page:horizontal {
                background-color: #E7EAEA;
            }
            QSlider::handle:horizontal {
                height: 0px;
                width: 0px;
                margin: -10px 0px -10px 0px;
                border-top: 10px solid #007AD9;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
            }
        """)
        self.show()


app = QApplication(argv)
window = MyWin()
exit(app.exec_())

In the updated code, we've added the QSlider::sub-page:horizontal and QSlider::add-page:horizontal pseudo-states to set the colors for the "filled" and "unfilled" parts of the slider track. We've also updated the QSlider::handle:horizontal pseudo-state to use a transparent border on the left and right sides, and a solid border on the top to create a triangle shape. Finally, we've removed the height and width properties from the QSlider::handle:horizontal pseudo-state to make it more like a tip.