Fix inverted active line of vertical QSlider (#212)

* Add stylesheet rules for QSlider each orientation

* Add vertical QSlider to widget gallery

* Add comment to stylesheet

Author: 5yutan5

qdarktheme/_resources/_template_stylesheet.py

@@ -506,14 +506,18 @@
 QSlider::groove:vertical {
     width: 4px;
 }
-QSlider::sub-page, QSlider::handle {
+QSlider::sub-page:horizontal,
+QSlider::add-page:vertical,
+QSlider::handle {
     background: {{ primary|color }};
 }
-QSlider::sub-page:disabled,
+QSlider::sub-page:horizontal:disabled,
+QSlider::add-page:vertical:disabled,
 QSlider::handle:disabled {
     background: {{ foreground|color(state="slider.disabledBackground") }};
 }
-QSlider::add-page {
+QSlider::add-page:horizontal,
+QSlider::sub-page:vertical {
     background: {{ foreground|color(state="sliderTrack.inactiveBackground") }};
 }
 QSlider::handle:hover,

qdarktheme/widget_gallery/_ui/widgets_ui.py

@@ -271,26 +271,31 @@ def __init__(self) -> None:
         super().__init__("QToolBox")
         # Widgets
         toolbox = QToolBox()
-        slider = QSlider(Qt.Orientation.Horizontal)
+        h_slider, v_slider = QSlider(Qt.Orientation.Horizontal), QSlider(Qt.Orientation.Vertical)
         dial_ticks = QDial()
         progressbar = QProgressBar()
         lcd_number = QLCDNumber()
 
         # Setup widgets
         self.setCheckable(True)
-        toolbox.addItem(slider, "Slider")
-        toolbox.addItem(dial_ticks, "Dial")
-        toolbox.addItem(progressbar, "Progress Bar")
-        toolbox.addItem(lcd_number, "LCD Number")
-        slider.setValue(50)
+        # If the slider value is 50, it is not clear which orientation is active.
+        h_slider.setValue(30)
+        v_slider.setValue(30)
         dial_ticks.setNotchesVisible(True)
         progressbar.setValue(50)
         lcd_number.setSegmentStyle(QLCDNumber.SegmentStyle.Flat)
         lcd_number.display(123)
 
         # Layout
-        v_layout = QVBoxLayout(self)
-        v_layout.addWidget(toolbox)
+        slider_component = QWidget()
+        v_layout = QVBoxLayout(slider_component)
+        v_layout.addWidget(h_slider)
+        v_layout.addWidget(v_slider)
+        toolbox.addItem(slider_component, "Slider")
+        toolbox.addItem(dial_ticks, "Dial")
+        toolbox.addItem(progressbar, "Progress Bar")
+        toolbox.addItem(lcd_number, "LCD Number")
+        QVBoxLayout(self).addWidget(toolbox)
 
 
 class WidgetsUI:

style/base.qss

@@ -631,14 +631,20 @@ QSlider::groove:horizontal {
 QSlider::groove:vertical {
     width: 4px;
 }
-QSlider::sub-page, QSlider::handle {
+/* Horizontal slider active line is `::sub-page`. */
+/* Vertical slider active line is `::add-page`. */
+QSlider::sub-page:horizontal,
+QSlider::add-page:vertical,
+QSlider::handle {
     background: {{ primary|color }};
 }
-QSlider::sub-page:disabled,
+QSlider::sub-page:horizontal:disabled,
+QSlider::add-page:vertical:disabled,
 QSlider::handle:disabled {
     background: {{ foreground|color(state="slider.disabledBackground") }};
 }
-QSlider::add-page {
+QSlider::add-page:horizontal,
+QSlider::sub-page:vertical {
     background: {{ foreground|color(state="sliderTrack.inactiveBackground") }};
 }
 QSlider::handle:hover,