可以通过修改控件的样式表来达到显示自定义的滑动条。

效果图：

完整代码：

 1 ui->hsPosition->setStyleSheet(tr("QSlider::groove:horizontal{ \
 2                                                                 border-radius:5px;\
 3                                                                 height:10px;\
 4                                                                 left:5px;\
 5                                                                 right:5px;\
 6                                                                 border-image:url(:/slider_bg.png);\
 7                                                                 }\
 8                                       QSlider::handle:horizontal{\
 9                                                           border-radius:10px;\
10                                                           width:20px;\
11                                                           height:20px;\
12                                                           margin-top:-5px;\
13                                                           margin-bottom:-5px;\
14                                                           margin-right:-5px;\
15                                                           margin-left:-5px;\
16                                                           border-image:url(:/5.png);\
17                                                           }\
18                                       QSlider::sub-page:horizontal{border-radius:5px;border-image:url(:/slider.png);}"));

代码单步分析

1 QSlider::groove:horizontal{ \　　　　　　　　　　　　　　　　　　　　　　//groove代表未划过的、horizontal代表横向条与之对应的是纵向vercital
2                            border-radius:5px;\ 　　　　　　　　　　  //圆角化
3                            height:10px;\　　　　 　　　　　　　　　　 //设定高度
4                            left:5px;\　　　　　　 　　　　　　　　　　 //设定左边界
5                            right:5px;\　　　　　　　　　　　　　　　　 //设定右边界
6                            border-image:url(:/slider_bg.png);\　　//设置显示的图片
7                           }\                 

 1 QSlider::handle:horizontal{\　　　　　　　　　　　　　　　　　 //handle代表滑动块
 2                            border-radius:10px;\　　　　　　//圆角化
 3                            width:20px;\　　　　　　　　　　　//设置宽度
 4                            height:20px;\　　　　　　　　　　 //设置高度
 5                            margin-top:-5px;\　　　　　　　　//设置页面顶边距
 6                            margin-bottom:-5px;\　　　　　　//设置页面底边距
 7                            margin-right:-5px;\　　　　　　 //设置页面右边距
 8                            margin-left:-5px;\　　　　　　　//设置页面左边距
 9                            border-image:url(:/5.png);\　 //设置显示的图片
10                           }\   

1 QSlider::sub-page:horizontal{\　　　　　　　　　　　　　　　　　　　　　　 //sub-page代表已经划过的区域
2                              border-radius:5px;\　　　　　　　　　　　　//圆角化
3                              border-image:url(:/slider.png);}"));   //设置显示的图片