diff --git a/xslider/xslider/main.cpp b/xslider/xslider/main.cpp
new file mode 100644
index 0000000..b0a4ec2
--- /dev/null
+++ b/xslider/xslider/main.cpp
@@ -0,0 +1,11 @@
+#include "widget.h"
+
+#include <QApplication>
+
+int main(int argc, char *argv[])
+{
+    QApplication a(argc, argv);
+    Widget w;
+    w.show();
+    return a.exec();
+}
diff --git a/xslider/xslider/widget.cpp b/xslider/xslider/widget.cpp
new file mode 100644
index 0000000..815d5f8
--- /dev/null
+++ b/xslider/xslider/widget.cpp
@@ -0,0 +1,15 @@
+#include "widget.h"
+#include "ui_widget.h"
+
+Widget::Widget(QWidget *parent)
+    : QWidget(parent)
+    , ui(new Ui::Widget)
+{
+    ui->setupUi(this);
+}
+
+Widget::~Widget()
+{
+    delete ui;
+}
+
diff --git a/xslider/xslider/widget.h b/xslider/xslider/widget.h
new file mode 100644
index 0000000..1fe2322
--- /dev/null
+++ b/xslider/xslider/widget.h
@@ -0,0 +1,21 @@
+#ifndef WIDGET_H
+#define WIDGET_H
+
+#include <QWidget>
+
+QT_BEGIN_NAMESPACE
+namespace Ui { class Widget; }
+QT_END_NAMESPACE
+
+class Widget : public QWidget
+{
+    Q_OBJECT
+
+public:
+    Widget(QWidget *parent = nullptr);
+    ~Widget();
+
+private:
+    Ui::Widget *ui;
+};
+#endif // WIDGET_H
diff --git a/xslider/xslider/widget.ui b/xslider/xslider/widget.ui
new file mode 100644
index 0000000..c5f2ce1
--- /dev/null
+++ b/xslider/xslider/widget.ui
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>Widget</class>
+ <widget class="QWidget" name="Widget">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>223</width>
+    <height>40</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Widget</string>
+  </property>
+  <layout class="QHBoxLayout" name="horizontalLayout">
+   <item>
+    <widget class="XSlider" name="horizontalSlider">
+     <property name="orientation">
+      <enum>Qt::Horizontal</enum>
+     </property>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>XSlider</class>
+   <extends>QSlider</extends>
+   <header>xslider.h</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>
diff --git a/xslider/xslider/xslider.cpp b/xslider/xslider/xslider.cpp
new file mode 100644
index 0000000..29a782e
--- /dev/null
+++ b/xslider/xslider/xslider.cpp
@@ -0,0 +1,188 @@
+#include "xslider.h"
+#include <QStyleOptionSlider>
+
+XSlider::XSlider(QWidget *parent)
+{
+    initForm();
+    initStyle();
+    setValue(65);
+}
+
+void XSlider::paintEvent(QPaintEvent *ev)
+{
+    // 绘制父类
+    QSlider::paintEvent(ev);
+
+    QPainter painter(this);
+    painter.setRenderHints(QPainter::Antialiasing);
+
+    QStyleOptionSlider opt;
+    initStyleOption(&opt);
+    QRect rect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);
+
+    int x = rect.x();
+    int y = rect.y();
+    int width = rect.width();
+    int height = rect.height();
+    if (width < height) {
+        width = height;
+    }
+    else {
+        height = width;
+    }
+
+    QFont font;
+    font.setPixelSize(width / 2);
+    painter.setFont(font);
+    painter.drawText(x, y, width, height, Qt::AlignCenter, QString::number(value()));
+}
+
+void XSlider::mousePressEvent(QMouseEvent *ev)
+{
+    if (ev->button() & Qt::RightButton) {
+        return;
+    }
+
+    double pos, value;
+    if (orientation() == Qt::Horizontal) {
+        pos = ev->pos().x() / (double)width();
+        value = pos * (maximum() - minimum()) + minimum();
+    }
+    else {
+        pos = ev->pos().y() / (double)height();
+        value = maximum() - pos * (maximum() - minimum()) + minimum();
+    }
+
+    setValue(value + 0.5);
+
+    emit clicked();
+    QSlider::mousePressEvent(ev);
+}
+
+void XSlider::initForm()
+{
+    sliderHeight = 18;
+    normalColor = QColor("#A0D7DA");
+    grooveColor = QColor("#22A3A9");
+    handleBorderColor = QColor("#0E99A0");
+    handleColor = QColor("#FFFFFF");
+    textColor = QColor("#000000");
+
+    this->setOrientation(Qt::Horizontal);
+}
+
+void XSlider::initStyle()
+{
+    int sliderRadius = sliderHeight / 2;
+    int handleSize = (sliderHeight * 3) / 2 + (sliderHeight / 5);
+    int handleRadius = handleSize / 2;
+    int handleOffset = handleRadius / 2;
+
+    QStringList list;
+    int handleWidth = handleSize + sliderHeight / 5 - 1;
+    list.append(QString("QSlider::horizontal{min-height:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));
+    list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
+                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
+    list.append(QString("QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
+                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
+    list.append(QString("QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
+                .arg(grooveColor.name()).arg(sliderHeight).arg(sliderRadius));
+    list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
+                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
+                .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));
+
+    //偏移一个像素
+    handleWidth = handleSize + sliderHeight / 5;
+    list.append(QString("QSlider::vertical{min-width:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));
+    list.append(QString("QSlider::groove:vertical{background:%1;width:%2px;border-radius:%3px;}")
+                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
+    list.append(QString("QSlider::add-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
+                .arg(grooveColor.name()).arg(sliderHeight).arg(sliderRadius));
+    list.append(QString("QSlider::sub-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
+                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
+    list.append(QString("QSlider::handle:vertical{height:%3px;margin-left:-%4px;margin-right:-%4px;border-radius:%5px;"
+                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
+                .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));
+
+
+    QString qss = list.join("");
+    this->setStyleSheet(qss);
+}
+
+int XSlider::getSliderHeight()
+{
+    return this->sliderHeight;
+}
+
+QColor XSlider::getNormalColor()
+{
+    return this->normalColor;
+}
+
+QColor XSlider::getGrooveColor()
+{
+    return this->grooveColor;
+}
+
+QColor XSlider::getHandleBorderColor()
+{
+    return this->handleBorderColor;
+}
+
+QColor XSlider::getHandleColor()
+{
+    return this->handleColor;
+}
+
+QColor XSlider::getTextColor()
+{
+    return textColor;
+}
+
+void XSlider::setSliderHeight(int &sliderHeight)
+{
+    if (this->sliderHeight != sliderHeight) {
+        this->sliderHeight = sliderHeight;
+        this->initStyle();
+    }
+}
+
+void XSlider::setNormalColor(QColor &normalColor)
+{
+    if (this->normalColor != normalColor) {
+        this->normalColor = normalColor;
+        this->initStyle();
+    }
+}
+
+void XSlider::setGrooveColor(QColor &grooveColor)
+{
+    if (this->grooveColor != grooveColor) {
+        this->grooveColor = grooveColor;
+        this->initStyle();
+    }
+}
+
+void XSlider::setHandleBorderColor(QColor &handleBorderColor)
+{
+    if (this->handleBorderColor != handleBorderColor) {
+        this->handleBorderColor = handleBorderColor;
+        this->initStyle();
+    }
+}
+
+void XSlider::setHandleColor(QColor &handleColor)
+{
+    if (this->handleColor != handleColor) {
+        this->handleColor = handleColor;
+        this->initStyle();
+    }
+}
+
+void XSlider::setTextColor(QColor &textColor)
+{
+    if (this->textColor != textColor) {
+        this->textColor = textColor;
+        this->initStyle();
+    }
+}
diff --git a/xslider/xslider/xslider.h b/xslider/xslider/xslider.h
new file mode 100644
index 0000000..95e015c
--- /dev/null
+++ b/xslider/xslider/xslider.h
@@ -0,0 +1,57 @@
+#ifndef XSLIDER_H
+#define XSLIDER_H
+
+#include <QWidget>
+#include <QSlider>
+#include <QPainter>
+#include <QMouseEvent>
+
+class XSlider : public QSlider
+{
+    Q_OBJECT
+//    Q_PROPERTY(int sliderHeight READ getSliderHeight WRITE setSliderHeight);
+//    Q_PROPERTY(QColor normalColor READ getNormalColor WRITE setNormalColor);
+//    Q_PROPERTY(QColor grooveColor READ getGrooveColor WRITE setGrooveColor);
+//    Q_PROPERTY(QColor handleBorderColor READ getHandleBorderColor WRITE setHandleBorderColor);
+//    Q_PROPERTY(QColor handleColor READ getHandleColor WRITE setHandleColor);
+//    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor);
+public:
+    explicit XSlider(QWidget* parent = nullptr);
+
+protected:
+    void paintEvent(QPaintEvent *ev) override;
+    void mousePressEvent(QMouseEvent* ev) override;
+
+private:
+    int sliderHeight;
+    QColor normalColor;
+    QColor grooveColor;
+    QColor handleBorderColor;
+    QColor handleColor;
+    QColor textColor;
+
+private slots:
+    void initForm();
+    void initStyle();
+
+public:
+    int getSliderHeight();
+    QColor getNormalColor();
+    QColor getGrooveColor();
+    QColor getHandleBorderColor();
+    QColor getHandleColor();
+    QColor getTextColor();
+
+private:
+    void setSliderHeight(int& sliderHeight);
+    void setNormalColor(QColor& normalColor);
+    void setGrooveColor(QColor& grooveColor);
+    void setHandleBorderColor(QColor& handleBorderColor);
+    void setHandleColor(QColor& handleColor);
+    void setTextColor(QColor& textColor);
+
+Q_SIGNALS:
+    void clicked();
+};
+
+#endif // XSLIDER_H
diff --git a/xslider/xslider/xslider.pro b/xslider/xslider/xslider.pro
new file mode 100644
index 0000000..7544b55
--- /dev/null
+++ b/xslider/xslider/xslider.pro
@@ -0,0 +1,33 @@
+QT       += core gui
+
+greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
+
+CONFIG += c++11
+
+# The following define makes your compiler emit warnings if you use
+# any Qt feature that has been marked deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if it uses deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
+SOURCES += \
+    main.cpp \
+    widget.cpp \
+    xslider.cpp
+
+HEADERS += \
+    widget.h \
+    xslider.h
+
+FORMS += \
+    widget.ui
+
+# Default rules for deployment.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target