diff --git a/MusicPlayer2/MusicPlayer2.vcxproj b/MusicPlayer2/MusicPlayer2.vcxproj
index ef8f7c91..a9e20453 100644
--- a/MusicPlayer2/MusicPlayer2.vcxproj
+++ b/MusicPlayer2/MusicPlayer2.vcxproj
@@ -339,6 +339,7 @@
     <ClInclude Include="UIElement\Rectangle.h" />
     <ClInclude Include="UIElement\ScrollArea.h" />
     <ClInclude Include="UIElement\SearchBox.h" />
+    <ClInclude Include="UIElement\Slider.h" />
     <ClInclude Include="UIElement\Spectrum.h" />
     <ClInclude Include="UIElement\StackElement.h" />
     <ClInclude Include="UIElement\Text.h" />
@@ -575,6 +576,7 @@
     <ClCompile Include="UIElement\Rectangle.cpp" />
     <ClCompile Include="UIElement\ScrollArea.cpp" />
     <ClCompile Include="UIElement\SearchBox.cpp" />
+    <ClCompile Include="UIElement\Slider.cpp" />
     <ClCompile Include="UIElement\Spectrum.cpp" />
     <ClCompile Include="UIElement\StackElement.cpp" />
     <ClCompile Include="UIElement\Text.cpp" />
diff --git a/MusicPlayer2/MusicPlayer2.vcxproj.filters b/MusicPlayer2/MusicPlayer2.vcxproj.filters
index 138d21be..c933cdc9 100644
--- a/MusicPlayer2/MusicPlayer2.vcxproj.filters
+++ b/MusicPlayer2/MusicPlayer2.vcxproj.filters
@@ -1161,6 +1161,9 @@
     <ClInclude Include="UIDialog\UITestDialog.h">
       <Filter>UI对话框\UITestDlg</Filter>
     </ClInclude>
+    <ClInclude Include="UIElement\Slider.h">
+      <Filter>UIElement</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <ClCompile Include="FindDlg.cpp">
@@ -1844,6 +1847,9 @@
     <ClCompile Include="UIDialog\UITestDialog.cpp">
       <Filter>UI对话框\UITestDlg</Filter>
     </ClCompile>
+    <ClCompile Include="UIElement\Slider.cpp">
+      <Filter>UIElement</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ResourceCompile Include="MusicPlayer2.rc">
diff --git a/MusicPlayer2/UIElement/ElementFactory.cpp b/MusicPlayer2/UIElement/ElementFactory.cpp
index 3c5c9669..736953b0 100644
--- a/MusicPlayer2/UIElement/ElementFactory.cpp
+++ b/MusicPlayer2/UIElement/ElementFactory.cpp
@@ -9,13 +9,13 @@ std::shared_ptr<UiElement::Element> UiElement::CElementFactory::CreateElement(co
     if (name == "verticalLayout")
     {
         auto layout = std::make_shared<UiElement::Layout>();
-        layout->type = UiElement::Layout::Vertical;
+        layout->type = UiElement::Vertical;
         element = layout;
     }
     else if (name == "horizontalLayout")
     {
         auto layout = std::make_shared<UiElement::Layout>();
-        layout->type = UiElement::Layout::Horizontal;
+        layout->type = UiElement::Horizontal;
         element = layout;
     }
     else if (name == "stackElement")
diff --git a/MusicPlayer2/UIElement/Layout.h b/MusicPlayer2/UIElement/Layout.h
index c3980cbd..b826ae2b 100644
--- a/MusicPlayer2/UIElement/Layout.h
+++ b/MusicPlayer2/UIElement/Layout.h
@@ -6,12 +6,7 @@ namespace UiElement
     class Layout : public Element
     {
     public:
-        enum Type
-        {
-            Vertical,
-            Horizontal,
-        };
-        Type type;
+        Orientation type;
         void CalculateChildrenRect();      //计算布局中所有子元素的位置
         virtual void Draw() override;
 
diff --git a/MusicPlayer2/UIElement/ScrollArea.cpp b/MusicPlayer2/UIElement/ScrollArea.cpp
index 470f4b1b..fa46230a 100644
--- a/MusicPlayer2/UIElement/ScrollArea.cpp
+++ b/MusicPlayer2/UIElement/ScrollArea.cpp
@@ -7,7 +7,7 @@ int UiElement::ScrollArea::GetScrollAreaHeight()
     if (!childLst.empty())
     {
         Layout* layout = dynamic_cast<Layout*>(childLst.front().get());
-        if (layout != nullptr && layout->type == Layout::Vertical)
+        if (layout != nullptr && layout->type == Vertical)
         {
             return layout->GetChildredTotalSize();
         }
diff --git a/MusicPlayer2/UIElement/Slider.cpp b/MusicPlayer2/UIElement/Slider.cpp
new file mode 100644
index 00000000..ffc60552
--- /dev/null
+++ b/MusicPlayer2/UIElement/Slider.cpp
@@ -0,0 +1,64 @@
+#include "stdafx.h"
+#include "Slider.h"
+
+void UiElement::Slider::SetRange(int min_val, int max_val)
+{
+    this->min_val = min_val;
+    this->max_val = max_val;
+}
+
+void UiElement::Slider::SetCurPos(int pos)
+{
+    cur_pos = pos;
+}
+
+const int UiElement::Slider::GetCurPos() const
+{
+    return cur_pos;
+}
+
+void UiElement::Slider::Draw()
+{
+    CalculateRect();
+
+    int slider_width = ui->DPI(4);
+    int handle_size = ui->DPI(20);
+    int circel_size = ui->DPI(12);
+    int circel_hover_size = ui->DPI(14);
+    int circel_pressed_size = ui->DPI(8);
+
+    //绘制背景
+    CRect rect_back = rect;
+    if (orientation == Horizontal)
+    {
+        rect_back.top = rect.top + (rect.Height() - slider_width) / 2;
+        rect_back.bottom = rect_back.top + slider_width;
+        rect_back.left += handle_size / 2;
+        rect_back.right -= handle_size / 2;
+    }
+    else
+    {
+        rect_back.left = rect.left + (rect.Width() - slider_width) / 2;
+        rect_back.right = rect_back.left + slider_width;
+        rect_back.top += handle_size / 2;
+        rect_back.bottom -= handle_size / 2;
+    }
+    
+
+    Element::Draw();
+}
+
+bool UiElement::Slider::LButtonUp(CPoint point)
+{
+    return false;
+}
+
+bool UiElement::Slider::LButtonDown(CPoint point)
+{
+    return false;
+}
+
+bool UiElement::Slider::MouseMove(CPoint point)
+{
+    return false;
+}
diff --git a/MusicPlayer2/UIElement/Slider.h b/MusicPlayer2/UIElement/Slider.h
new file mode 100644
index 00000000..f2a72625
--- /dev/null
+++ b/MusicPlayer2/UIElement/Slider.h
@@ -0,0 +1,27 @@
+#pragma once
+#include "UIElement/UIElement.h"
+namespace UiElement
+{
+    //滑动条
+    class Slider : public Element
+    {
+    public:
+        void SetRange(int min_val, int max_val);
+        void SetCurPos(int pos);
+        const int GetCurPos() const;
+
+        virtual void Draw() override;
+        virtual bool LButtonUp(CPoint point) override;
+        virtual bool LButtonDown(CPoint point) override;
+        virtual bool MouseMove(CPoint point) override;
+
+    protected:
+        Orientation orientation{ Horizontal };
+        int min_val{};
+        int max_val{ 100 };
+        int cur_pos{};
+        bool hover{};
+        bool pressed{};
+    };
+}
+
diff --git a/MusicPlayer2/UIElement/UIElement.h b/MusicPlayer2/UIElement/UIElement.h
index 43495f18..49a25499 100644
--- a/MusicPlayer2/UIElement/UIElement.h
+++ b/MusicPlayer2/UIElement/UIElement.h
@@ -156,6 +156,14 @@ namespace UiElement
         };
     }
 
+    enum Orientation
+    {
+        Vertical,
+        Horizontal,
+    };
+
+
+    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
     template<class T>
     inline T* Element::FindRelatedElement(std::string id)
     {