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

Joined
Mar 21, 2023
Messages
1
Reaction score
0
I want to make the end of QSlider triangular like in this
1679407375741-png.2437
, 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.
F9sr8.png

Python:
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_())
 
Joined
Mar 31, 2023
Messages
95
Reaction score
8
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:
Python:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,763
Messages
2,569,560
Members
45,035
Latest member
HoTaKeDai

Latest Threads

Top