【PyQt6】【サンプル】QSlider（ハンドルが丸いスライダー）

上がノーマルのスライダーです。

下が今回作成したスライダーです。

Pythonスクリプト

from PyQt6.QtCore import Qt, QSize
from PyQt6.QtWidgets import QWidget, QApplication, QVBoxLayout, QSlider

QSS = """
QSlider::groove:horizontal {
    border: 1px solid;
    height: 10px;
    /*margin: 30px;*/
    background-color: rgb(238, 238, 238);
    /*position: absolute;*/
    left: 20px; right: 20px;
    }
QSlider::handle:horizontal {
    background-color: rgb(80, 80, 232);
    height: 40px;
    width: 40px;
    border-radius: 20px;
    margin: -15px -20px;
    }
QSlider::handle:horizontal:pressed {
    background-color: rgb(148, 148, 254);
}
QSlider::add-page:horizontal {
    background: rgb(183, 183, 183);
}
QSlider::sub-page:horizontal {
    background: rgb(80, 80, 232);
}
"""

class Window(QWidget):

    def __init__(self):
        super().__init__()
        self.initUI()
        
    def initUI(self):
        self.setWindowTitle('slider sample')

        self.slider_1 = QSlider()
        self.slider_1.setFixedSize(QSize(400,200))
        self.slider_1.setOrientation(Qt.Orientation.Horizontal)

        self.slider_2 = QSlider()
        self.slider_2.setFixedSize(QSize(400,200))
        self.slider_2.setOrientation(Qt.Orientation.Horizontal)
        self.slider_2.setStyleSheet(QSS)

        layout = QVBoxLayout()
        layout.addWidget(self.slider_1)
        layout.addWidget(self.slider_2)

        self.setLayout(layout)

if __name__ == "__main__":
    app = QApplication([])
    ex =Window()
    ex.show()
    app.exec()

ハンドルを丸くするポイント

QSlider::handleのheightとwidthに同じ値を設定します。
今回の場合、height: 40px、width: 40pxを設定しています。

QSlider::handleのmarginの最初の値に(handle height - groove height)/2 * -1を設定します。
今回の場合、(40 -10)/2 * -1 = -15を設定しています。

QSlider::handleのmarginの2番目の値にhandle height/2 * -1を設定します。
今回の場合、40/2 * -1 = -20を設定しています。