效果5如图：
水平的QSlider
1 QSlider
2 {
3 background-color: #363636;
4 border-style: outset;
5 border-radius: 10px;
6 }
7
8 QSlider::groove:horizontal
9 {
10 height: 12px;
11 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
12 margin: 2px 0
13 }
14
15 QSlider::handle:horizontal
16 {
17 background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);
18 width: 16px;
19 height: 16px;
20 margin: -5px 6px -5px 6px;
21 border-radius:11px;
22 border: 3px solid #ffffff;
23 }
竖直的QSlider
1 QSlider
2 {
3 background-color: rgba(22, 22, 22, 0.7);
4 padding-top: 15px; /*上面端点离顶部的距离*/
5 padding-bottom: 15px;
6 border-radius: 5px; /*外边框矩形倒角*/
7 }
8
9 QSlider::add-page:vertical
10 {
11 background-color: #FF7826;
12 width:5px;
13 border-radius: 2px;
14 }
15
16 QSlider::sub-page:vertical
17 {
18 background-color: #7A7B79;
19 width:5px;
20 border-radius: 2px;
21 }
22
23 QSlider::groove:vertical
24 {
25 background:transparent;
26 width:6px;
27 }
28
29 QSlider::handle:vertical
30 {
31 height: 14px;
32 width: 14px;
33 margin: 0px -4px 0px -4px;
34 border-radius: 7px;
35 background: white;
36 }
效果2：增加图片
1 #horizontalSlider::groove:horizontal {
2 border: 1px solid gray;
3 border-radius:2px;
4 height: 4px;
5 left: 12px; right: 12px;
6 }
7
8 /*滑条*/
9 #horizontalSlider::handle:horizontal {
10 border: 1px solid gray;
11 border-image:url(":/image/images/b.png");
12 width: 20;
13 margin: -5px -5px -5px -5px;
14 }
15
16 /*已经划过的*/
17 #horizontalSlider::sub-page:horizontal{
18 background: #D1CE21;
19 }
效果3
1 QSlider::groove:horizontal {
2 border: 1px solid #bbb;
3 background: white;
4 height: 10px;
5 border-radius: 4px;
6 }
7
8 QSlider::sub-page:horizontal {
9 background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
10 stop: 0 #bbf, stop: 1 #55f);
11 border: 1px solid #777;
12 height: 10px;
13 border-radius: 4px;
14 }
15
16 QSlider::add-page:horizontal {
17 background: #fff;
18 border: 1px solid #777;
19 height: 10px;
20 border-radius: 4px;
21 }
22
23 QSlider::handle:horizontal {
24 background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
25 stop:0 #eee, stop:1 #ccc);
26 border: 1px solid #777;
27 width: 13px;
28 margin-top: -2px;
29 margin-bottom: -2px;
30 border-radius: 4px;
31 }
32
33 QSlider::handle:horizontal:hover {
34 background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
35 stop:0 #fff, stop:1 #ddd);
36 border: 1px solid #444;
37 border-radius: 4px;
38 }
39
40 QSlider::sub-page:horizontal:disabled {
41 background: #bbb;
42 border-color: #999;
43 }
44
45 QSlider::add-page:horizontal:disabled {
46 background: #eee;
47 border-color: #999;
48 }
49
50 QSlider::handle:horizontal:disabled {
51 background: #eee;
52 border: 1px solid #aaa;
53 border-radius: 4px;
54 }
效果4:
1 /* 一定要先设置groove，不然handle的很多效果将没有*/
2 QString sliderstyle = QString("QSlider::groove:horizontal{border:none; height:12px; border-radius:6px; background:rgba(0, 19, 39, 100);}"
3 /* 上下边距和左右边距*/
4 "QSlider::handle:horizontal{border:none; margin:-5px 0px; width:22px; height:22px; border-radius:20px;"
5 "border-image:url(:/new/prefix1/64.png);}"
6 /*划过部分*/
7 "QSlider::sub-page:horizontal{background:rgba(0, 19, 39, 100); border-radius:6px;}"
8 /*未划过部分*/
9 "QSlider::add-page:horizontal{background:rgba(0, 19, 39, 100); border-radius:6px;}");
10 ui->horizontalSlider->setStyleSheet(sliderstyle);
效果5：
1 "QSlider::groove:horizontal{border:none; height:73px; border-radius:6px; border-image:url(:/new/prefix1/b1.png);}"
2 /* 上下边距和左右边距*/
3 "QSlider::handle:horizontal{border:none; margin:20px 0px; width:22px; height:22px; border-radius:20px;"
4 "border-image:url(:/new/prefix1/ZZ64.png);}"
5 /*划过部分*/
6 "QSlider::sub-page:horizontal{background:rgba(0, 19, 39, 0); border-radius:6px;}"
7 /*未划过部分*/
8 "QSlider::add-page:horizontal{background:rgba(0, 19, 39, 0); border-radius:6px;}"
9 );
