QT:QSS自定义 QSlider实例

您可以设置水平滑块的样式，如下所示：

  QSlider::groove:horizontal {
    
      border: 1px solid #999999;
      height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
      background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
      margin: 2px 0;
  }

  QSlider::handle:horizontal {
    
      background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
      border: 1px solid #5c5c5c;
      width: 18px;
      margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
      border-radius: 3px;
  }

如果要更改手柄前后滑块部件的颜色，可以使用添加页面和子页面子控件。 例如，对于垂直滑块：

  QSlider::groove:vertical {
    
      background: red;
      position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
      left: 4px; right: 4px;
  }

  QSlider::handle:vertical {
    
      height: 10px;
      background: green;
      margin: 0 -4px; /* expand outside the groove */
  }

  QSlider::add-page:vertical {
    
      background: white;
  }

  QSlider::sub-page:vertical {
    
      background: pink;
  }