QSlider groove color

[Captain Haddock]

I add a QSlider and find when the window is inactive, the groove is blue and when active the groove is orange. How do I change those colors? I have seen various posts relating to this using styles sheets but have not managed to change the color. Any better pointers or more helpful, can anyone fix up the code below to use different colors for each state please?

I may be getting confused by the terminology in other posts, e.g. how should I refer to the area that is colored orange?

I tried modifying the styles of QSlider::add-page and QSlider::sub-page as shown here: https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qslider to no effect.

import sys
from PyQt6 import QtWidgets, QtCore


class MainWindow(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        self.setFixedWidth(400)
        self.setFixedHeight(400)

        self.slider = QtWidgets.QSlider(QtCore.Qt.Orientation.Vertical)
        self.slider.setFixedHeight(300)
        self.slider.setMinimum(0)
        self.slider.setMaximum(100)
        self.slider.setValue(50)

        self.layout().addWidget(self.slider)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    ex = MainWindow()
    ex.show()
    sys.exit(app.exec())

[SGaist]

Hi,

Can you show the stylesheet you use and how you applied it ?

[Captain Haddock]

@SGaist I found a solution for my case. The hint someone pointed to (on another board) was to set all the styles. The code below achieves what I was after with the original shown to the side (might not be the most elegant code) .
Relevant links are:

• https://stackoverflow.com/questions/76962373/pyqt6-qslider-how-to-set-groove-color (see comment "With complex widgets such as QComboBox and QScrollBar, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well." .. usability issue with that requirement I'd say!)

• https://het.as.utexas.edu/HET/Software/html/stylesheet-examples.html#customizing-qslider

import sys
from PyQt6 import QtWidgets, QtCore


class MainWindow(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        self.setFixedWidth(400)
        self.setFixedHeight(400)

        frame = QtWidgets.QFrame()
        layout = QtWidgets.QHBoxLayout()
        frame.setLayout(layout)

        slider1 = QtWidgets.QSlider(QtCore.Qt.Orientation.Vertical)
        slider1.setFixedHeight(300)
        slider1.setFixedWidth(20)
        slider1.setMinimum(0)
        slider1.setMaximum(100)
        slider1.setValue(50)

        slider2 = QtWidgets.QSlider(QtCore.Qt.Orientation.Vertical)
        styles = "QSlider::groove:vertical { background: white; position: absolute; left: 8px; right: 7px; }"
        styles += "QSlider::handle:vertical { height: 11px; background: #979EA8; margin: 0 -4px; border-style:solid; border-color: grey;border-width:1px;border-radius:3px}"
        styles += "QSlider::sub-page:vertical { background: #979EA8; border-style:solid; border-color: grey;border-width:1px;border-radius:2px}"
        styles += "QSlider::add-page:vertical { background: #979EA8; border-style:solid; border-color: grey;border-width:1px;border-radius:2px}"
        slider2.setStyleSheet(styles)
        slider2.setFixedHeight(300)
        slider2.setFixedWidth(20)
        slider2.setMinimum(0)
        slider2.setMaximum(100)
        slider2.setValue(50)

        layout.addWidget(slider1)
        layout.addWidget(slider2)
        layout.addStretch(True)

        self.layout().addWidget(frame)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    ex = MainWindow()
    ex.show()
    sys.exit(app.exec())