本文章主要学习QSlider样式

准备下面几张背景图片：

调小图标

、调大图标

、QSlider位置图标

QSlider划过的背景图标

、QSlider未划过的背景图标

最终效果图

自己创建一个QSlider工程，此处省略……

CSDN QT大纲：Qt开发必备技术栈学习路线和资料

编写mainwindow.h文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QSlider>
#include <QPushButton>


class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
private slots:
    void    BtnLeftClick();
    void    BtnRightClick();
private:
    QSlider     *pQSlider;
};

#endif // MAINWINDOW_H

编写mainwindow.cpp文件

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
    this->resize(QSize(360,90));
    this->setStyleSheet("background-color:rgb(43,45,55);border:none;");

    QPushButton *pBtnL      = new QPushButton(this);
    QPushButton *pBtnR      = new QPushButton(this);
    pQSlider   = new QSlider(Qt::Horizontal,this);

    pBtnL->setGeometry(30,24,32,34);
    pQSlider->setGeometry(70,20,220,40);
    pBtnR->setGeometry(300,20,32,34);


    pBtnL->setStyleSheet("outline:none;border-image: url(:/btn_del.png)");
    pBtnR->setStyleSheet("outline:none;border-image: url(:/btn_add.png)");

    //设置不可用,不可滑动
    pQSlider->setEnabled(false);
    pQSlider->setStyleSheet("QSlider::groove:horizontal{ \
                                                    height: 12px; \
                                                    left: 5px; \
                                                    right: 5px; \
                                                    border-image: url(:/qslider_bg.png);\
                                                  } \
                                    QSlider::handle:horizontal{ \
                                                    border-radius: 20px; \
                                                    width:  40px; \
                                                    height: 40px; \
                                                    margin-top: -10px; \
                                                    margin-left: -10px; \
                                                    margin-bottom: -20px; \
                                                    margin-right: -10px; \
                                                    border-image:url(:/qslider_btn.png);} \
                                    QSlider::sub-page:horizontal{border-image: url(:/qslider.png);}");


    //设置最小值、最大值
    pQSlider->setMinimum(0);
    pQSlider->setMaximum(16);

    //设置初始值
    pQSlider->setValue(4);

    //关联信号槽
    connect(pBtnL,SIGNAL(clicked()),this,SLOT(BtnLeftClick()));
    connect(pBtnR,SIGNAL(clicked()),this,SLOT(BtnRightClick()));
}

void MainWindow::BtnLeftClick()
{
    if(pQSlider->value() > 0)
    {
        pQSlider->setValue(pQSlider->value()-1);
    }
}

void MainWindow::BtnRightClick()
{
    if(pQSlider->value() < 16)
    {
        pQSlider->setValue(pQSlider->value()+1);
    }
}

编写main.cpp文件

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

es.qrc内容如下图所示