From 9b7b77b7e20e6a532b21c736ca9d0886de4eeba6 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 20 Apr 2023 19:47:36 +0800
Subject: [PATCH] refactor(Slider): new slider

---
 .../__test__/__snapshots__/demo.test.jsx.snap |   74 +-
 .../__test__/__snapshots__/demo.test.jsx.snap | 1171 ++++++++++-------
 src/slider/__test__/demo.test.jsx             |   18 +-
 src/slider/__test__/index.test.jsx            |  112 +-
 src/slider/demos/base.vue                     |   11 +-
 src/slider/demos/capsule.vue                  |   21 +
 src/slider/demos/disable.vue                  |    3 -
 src/slider/demos/disabled.vue                 |   28 +
 src/slider/demos/label.vue                    |   12 +
 src/slider/demos/mark.vue                     |   11 -
 src/slider/demos/mobile.vue                   |   57 +-
 src/slider/demos/range.vue                    |    2 +-
 src/slider/demos/step.vue                     |   17 +
 src/slider/demos/title.vue                    |   18 -
 src/slider/demos/unZero.vue                   |    3 -
 src/slider/demos/value.vue                    |    9 -
 src/slider/props.ts                           |   18 +-
 src/slider/slider.en-US.md                    |   29 +
 src/slider/slider.md                          |   13 +-
 src/slider/slider.vue                         |  521 +++++---
 src/slider/style/index.js                     |    2 +-
 src/slider/tool.ts                            |   48 +
 src/slider/type.ts                            |   18 +-
 23 files changed, 1246 insertions(+), 970 deletions(-)
 create mode 100644 src/slider/demos/capsule.vue
 delete mode 100644 src/slider/demos/disable.vue
 create mode 100644 src/slider/demos/disabled.vue
 create mode 100644 src/slider/demos/label.vue
 delete mode 100644 src/slider/demos/mark.vue
 create mode 100644 src/slider/demos/step.vue
 delete mode 100644 src/slider/demos/title.vue
 delete mode 100644 src/slider/demos/unZero.vue
 delete mode 100644 src/slider/demos/value.vue
 create mode 100644 src/slider/slider.en-US.md
 create mode 100644 src/slider/tool.ts

diff --git a/src/loading/__test__/__snapshots__/demo.test.jsx.snap b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
index 742501f85..a8e5b9db5 100644
--- a/src/loading/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
@@ -916,38 +916,31 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
           data-v-0fadab4c=""
         >
           <div
-            class="t-slider-wrap"
+            class="t-slider"
             data-v-0fadab4c=""
           >
+            
             <!--v-if-->
             <div
-              class="t-slider"
+              class="t-slider__bar t-slider__bar--default"
             >
-              <!-- 总长度 -->
-              <div
-                class="t-slider__bar"
-              />
-              <!-- 滑块长度 -->
-              <div
-                class="t-slider__track"
-                style="width: 50%;"
-              />
-              <!-- 滑块操作 -->
-              
+              <!--v-if-->
               <div
-                class="t-slider__handle"
-                style="left: 50%;"
-              />
-              
-              <!-- 刻度内容 -->
-              <div
-                class="t-slider__mark"
+                class="t-slider__line t-slider__line--default t-slider__line--single"
+                style=""
               >
-                
-                
+                <div
+                  class="t-slider__dot"
+                >
+                  <!--v-if-->
+                  <div
+                    class="t-slider__dot-slider"
+                  />
+                </div>
               </div>
             </div>
             <!--v-if-->
+            
             <!--v-if-->
           </div>
         </div>
@@ -1147,38 +1140,31 @@ exports[`Loading > Loading speedVue demo works fine 1`] = `
     data-v-0fadab4c=""
   >
     <div
-      class="t-slider-wrap"
+      class="t-slider"
       data-v-0fadab4c=""
     >
+      
       <!--v-if-->
       <div
-        class="t-slider"
+        class="t-slider__bar t-slider__bar--default"
       >
-        <!-- 总长度 -->
+        <!--v-if-->
         <div
-          class="t-slider__bar"
-        />
-        <!-- 滑块长度 -->
-        <div
-          class="t-slider__track"
-          style="width: 50%;"
-        />
-        <!-- 滑块操作 -->
-        
-        <div
-          class="t-slider__handle"
-          style="left: 50%;"
-        />
-        
-        <!-- 刻度内容 -->
-        <div
-          class="t-slider__mark"
+          class="t-slider__line t-slider__line--default t-slider__line--single"
+          style=""
         >
-          
-          
+          <div
+            class="t-slider__dot"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
         </div>
       </div>
       <!--v-if-->
+      
       <!--v-if-->
     </div>
   </div>
diff --git a/src/slider/__test__/__snapshots__/demo.test.jsx.snap b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
index 7489ca5c0..170637b98 100644
--- a/src/slider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,129 +2,375 @@
 
 exports[`Slider > Slider baseVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap"
+  class="t-slider"
 >
+  
   <!--v-if-->
   <div
-    class="t-slider"
+    class="t-slider__bar t-slider__bar--default"
   >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 0%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 0%;"
-    />
-    
-    <!-- 刻度内容 -->
+    <!--v-if-->
     <div
-      class="t-slider__mark"
+      class="t-slider__line t-slider__line--default t-slider__line--single"
+      style=""
     >
-      
-      
+      <div
+        class="t-slider__dot"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__dot-slider"
+        />
+      </div>
     </div>
   </div>
   <!--v-if-->
+  
   <!--v-if-->
 </div>
 `;
 
-exports[`Slider > Slider disableVue demo works fine 1`] = `
+exports[`Slider > Slider capsuleVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap t-is-disabled"
+  data-v-app=""
 >
-  <!--v-if-->
+  
   <div
     class="t-slider"
   >
-    <!-- 总长度 -->
+    
+    <!--v-if-->
     <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
+      class="t-slider__bar t-slider__bar--capsule"
+    >
+      <!--v-if-->
+      <div
+        class="t-slider__line t-slider__line--capsule t-slider__line--single"
+        style=""
+      >
+        <div
+          class="t-slider__dot"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
+    
+    <!--v-if-->
+  </div>
+  <div
+    class="t-slider t-slider--range"
+  >
+    <!--v-if-->
+    
+    <!--v-if-->
     <div
-      class="t-slider__track"
-      style="width: 0%;"
-    />
-    <!-- 滑块操作 -->
+      class="t-slider__bar t-slider__bar--capsule"
+    >
+      <!--v-if-->
+      <div
+        class="t-slider__line t-slider__line--capsule"
+        style="left: 0px; right: 0px;"
+      >
+        <div
+          class="t-slider__dot t-slider__dot--left"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+        <div
+          class="t-slider__dot t-slider__dot--right"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
+    
+  </div>
+  <div
+    class="t-slider t-slider--top t-slider--range"
+  >
+    <!--v-if-->
     
+    <!--v-if-->
     <div
-      class="t-slider__handle"
-      style="left: 0%;"
-    />
+      class="t-slider__bar t-slider__bar--capsule"
+    >
+      <!--v-if-->
+      <div
+        class="t-slider__line t-slider__line--capsule"
+        style="left: 0px; right: 0px;"
+      >
+        <div
+          class="t-slider__dot t-slider__dot--left"
+        >
+          <div
+            class="t-slider__dot-value"
+          >
+            0
+          </div>
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+        <div
+          class="t-slider__dot t-slider__dot--right"
+        >
+          <div
+            class="t-slider__dot-value"
+          >
+            0
+          </div>
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
+    
+  </div>
+  <div
+    class="t-slider"
+  >
     
-    <!-- 刻度内容 -->
+    <!--v-if-->
     <div
-      class="t-slider__mark"
+      class="t-slider__bar t-slider__bar--capsule"
     >
-      
-      
+      <!--v-if-->
+      <div
+        class="t-slider__line t-slider__line--capsule t-slider__line--single"
+        style=""
+      >
+        <div
+          class="t-slider__dot"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+      </div>
     </div>
+    <!--v-if-->
+    
+    <!--v-if-->
   </div>
-  <!--v-if-->
-  <!--v-if-->
+  <div
+    class="t-slider t-slider--range"
+  >
+    <!--v-if-->
+    
+    <!--v-if-->
+    <div
+      class="t-slider__bar t-slider__bar--capsule"
+    >
+      <!--v-if-->
+      <div
+        class="t-slider__line t-slider__line--capsule"
+        style="left: 0px; right: 0px;"
+      >
+        <div
+          class="t-slider__dot t-slider__dot--left"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+        <div
+          class="t-slider__dot t-slider__dot--right"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
+    
+  </div>
+  
 </div>
 `;
 
-exports[`Slider > Slider markVue demo works fine 1`] = `
+exports[`Slider > Slider disabledVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap t-is-mark"
+  data-v-app=""
 >
-  <!--v-if-->
+  
   <div
-    class="t-slider"
+    class="t-slider t-slider--disabled"
+    data-v-53635720=""
   >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 50%;"
-    />
-    <!-- 滑块操作 -->
     
+    <!--v-if-->
     <div
-      class="t-slider__handle"
-      style="left: 50%;"
-    />
+      class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+    >
+      <!--v-if-->
+      <div
+        class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
+        style=""
+      >
+        <div
+          class="t-slider__dot"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
     
-    <!-- 刻度内容 -->
+    <!--v-if-->
+  </div>
+  <div
+    class="wrapper"
+    data-v-53635720=""
+  >
     <div
-      class="t-slider__mark"
+      class="t-slider t-slider--top t-slider--disabled t-slider--range"
+      data-v-53635720=""
     >
+      <!--v-if-->
       
+      <text
+        class="t-slider__range-extreme t-slider__range-extreme--min"
+      >
+        0
+      </text>
       <div
-        class="t-slider__mark-text t-is-active"
-        style="left: 0%;"
+        class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
       >
-        小
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default t-slider__line--disabled"
+          style="left: 0px; right: 0px;"
+        >
+          <div
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
       </div>
+      <text
+        class="t-slider__value t-slider__value--max"
+      >
+        100
+      </text>
+      
+    </div>
+  </div>
+  <div
+    class="wrapper"
+    data-v-53635720=""
+  >
+    <div
+      class="t-slider t-slider--disabled t-slider--range"
+      data-v-53635720=""
+    >
+      <!--v-if-->
+      
+      <!--v-if-->
       <div
-        class="t-slider__mark-text t-is-"
-        style="left: 50%;"
+        class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
       >
-        中
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default t-slider__line--disabled"
+          style="left: 0px; right: 0px;"
+        >
+          <div
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
       </div>
+      <!--v-if-->
+      
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`Slider > Slider labelVue demo works fine 1`] = `
+<div
+  class="t-slider t-slider--top"
+>
+  
+  <!--v-if-->
+  <div
+    class="t-slider__bar t-slider__bar--default"
+  >
+    <!--v-if-->
+    <div
+      class="t-slider__line t-slider__line--default t-slider__line--single"
+      style=""
+    >
       <div
-        class="t-slider__mark-text t-is-"
-        style="left: 100%;"
+        class="t-slider__dot"
       >
-        大
+        <div
+          class="t-slider__dot-value"
+        >
+          10
+        </div>
+        <div
+          class="t-slider__dot-slider"
+        />
       </div>
-      
     </div>
   </div>
   <!--v-if-->
+  
   <!--v-if-->
 </div>
 `;
@@ -161,7 +407,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        基础滑动选择器
+        单游标滑块
       </p>
     </div>
     <div
@@ -169,44 +415,32 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="slider-demo"
+        class="t-slider"
         data-v-98828574=""
       >
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--default"
         >
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__line t-slider__line--default t-slider__line--single"
+            style=""
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 0%;"
-            />
-            
-            <!-- 刻度内容 -->
             <div
-              class="t-slider__mark"
+              class="t-slider__dot"
             >
-              
-              
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
             </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        
+        <!--v-if-->
       </div>
       
     </div>
@@ -222,7 +456,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        带数值滑动选择器
+        双游标滑块
       </p>
     </div>
     <div
@@ -230,48 +464,40 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="slider-demo"
+        class="t-slider t-slider--range"
         data-v-98828574=""
       >
+        <!--v-if-->
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--default"
         >
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__line t-slider__line--default"
+            style="left: 0px; right: 0px;"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 50%;"
-            />
-            <!-- 滑块操作 -->
-            
             <div
-              class="t-slider__handle"
-              style="left: 50%;"
-            />
-            
-            <!-- 刻度内容 -->
+              class="t-slider__dot t-slider__dot--left"
+            >
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
+            </div>
             <div
-              class="t-slider__mark"
+              class="t-slider__dot t-slider__dot--right"
             >
-              
-              
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
             </div>
           </div>
-          <div
-            class="t-slider-wrap__value"
-          >
-            50
-          </div>
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        
       </div>
       
     </div>
@@ -287,7 +513,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        起始非零滑动选择器
+        带数值滑动选择器
       </p>
     </div>
     <div
@@ -295,44 +521,36 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="slider-demo"
+        class="t-slider t-slider--top"
         data-v-98828574=""
       >
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--default"
         >
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__line t-slider__line--default t-slider__line--single"
+            style=""
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 0%;"
-            />
-            
-            <!-- 刻度内容 -->
             <div
-              class="t-slider__mark"
+              class="t-slider__dot"
             >
-              
-              
-            </div>
+              <div
+                class="t-slider__dot-value"
+              >
+                10
+              </div>
+              <div
+                class="t-slider__dot-slider"
+              />
+            </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        
+        <!--v-if-->
       </div>
       
     </div>
@@ -356,137 +574,187 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="slider-demo"
+        class="t-slider"
         data-v-98828574=""
       >
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-mark"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--default"
         >
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__line t-slider__line--default t-slider__line--single"
+            style=""
           >
-            <!-- 总长度 -->
             <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 50%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 50%;"
-            />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
+              class="t-slider__dot"
             >
-              
-              <div
-                class="t-slider__mark-text t-is-active"
-                style="left: 0%;"
-              >
-                小
-              </div>
+              <!--v-if-->
               <div
-                class="t-slider__mark-text t-is-"
-                style="left: 50%;"
-              >
-                中
-              </div>
-              <div
-                class="t-slider__mark-text t-is-"
-                style="left: 100%;"
-              >
-                大
-              </div>
-              
+                class="t-slider__dot-slider"
+              />
             </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        
+        <!--v-if-->
       </div>
       
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    class="tdesign-mobile-demo-block"
     data-v-98828574=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
     >
-      <!--v-if-->
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件状态
+      </h2>
       <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        class="tdesign-mobile-demo-block__summary"
       >
-        区间滑动选择器
+        滑块禁用状态
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider t-slider--disabled"
+        data-v-53635720=""
       >
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-value"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
         >
+          <!--v-if-->
           <div
-            class="t-slider-wrap__value--left"
+            class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
+            style=""
           >
-            0
+            <div
+              class="t-slider__dot"
+            >
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
+            </div>
           </div>
+        </div>
+        <!--v-if-->
+        
+        <!--v-if-->
+      </div>
+      <div
+        class="wrapper"
+        data-v-53635720=""
+      >
+        <div
+          class="t-slider t-slider--top t-slider--disabled t-slider--range"
+          data-v-53635720=""
+        >
+          <!--v-if-->
+          
+          <text
+            class="t-slider__range-extreme t-slider__range-extreme--min"
+          >
+            0
+          </text>
           <div
-            class="t-slider"
+            class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="left: 30%; width: 40%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 30%;"
-            />
-            <div
-              class="t-slider__handle"
-              style="left: 70%;"
-            />
-            
-            <!-- 刻度内容 -->
+            <!--v-if-->
             <div
-              class="t-slider__mark"
+              class="t-slider__line t-slider__line--default t-slider__line--disabled"
+              style="left: 0px; right: 0px;"
             >
-              
-              
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
             </div>
           </div>
+          <text
+            class="t-slider__value t-slider__value--max"
+          >
+            100
+          </text>
+          
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-53635720=""
+      >
+        <div
+          class="t-slider t-slider--disabled t-slider--range"
+          data-v-53635720=""
+        >
+          <!--v-if-->
+          
           <!--v-if-->
           <div
-            class="t-slider-wrap__value"
+            class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
           >
-            100
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default t-slider__line--disabled"
+              style="left: 0px; right: 0px;"
+            >
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
           </div>
+          <!--v-if-->
+          
         </div>
       </div>
       
+      
     </div>
   </div>
   <div
@@ -499,194 +767,188 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        02 状态
+        03 特殊样式
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        滑动选择器禁用状态
+        胶囊型滑块
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider"
       >
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-disabled"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--capsule"
         >
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__line t-slider__line--capsule t-slider__line--single"
+            style=""
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
             <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 0%;"
-            />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
+              class="t-slider__dot"
             >
-              
-              
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
             </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        
+        <!--v-if-->
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block"
-    data-v-98828574=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        03 规格
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        无标题滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider t-slider--range"
       >
+        <!--v-if-->
+        
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--capsule"
         >
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__line t-slider__line--capsule"
+            style="left: 0px; right: 0px;"
           >
-            <!-- 总长度 -->
             <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
+              class="t-slider__dot t-slider__dot--left"
+            >
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
+            </div>
             <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
+              class="t-slider__dot t-slider__dot--right"
+            >
+              <!--v-if-->
+              <div
+                class="t-slider__dot-slider"
+              />
+            </div>
+          </div>
+        </div>
+        <!--v-if-->
+        
+      </div>
+      <div
+        class="t-slider t-slider--top t-slider--range"
+      >
+        <!--v-if-->
+        
+        <!--v-if-->
+        <div
+          class="t-slider__bar t-slider__bar--capsule"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__line t-slider__line--capsule"
+            style="left: 0px; right: 0px;"
+          >
             <div
-              class="t-slider__handle"
-              style="left: 0%;"
-            />
-            
-            <!-- 刻度内容 -->
+              class="t-slider__dot t-slider__dot--left"
+            >
+              <div
+                class="t-slider__dot-value"
+              >
+                0
+              </div>
+              <div
+                class="t-slider__dot-slider"
+              />
+            </div>
             <div
-              class="t-slider__mark"
+              class="t-slider__dot t-slider__dot--right"
             >
-              
-              
+              <div
+                class="t-slider__dot-value"
+              >
+                0
+              </div>
+              <div
+                class="t-slider__dot-slider"
+              />
             </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-98828574=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        有标题滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider"
       >
+        
+        <!--v-if-->
         <div
-          class="flex"
-          data-v-98828574=""
+          class="t-slider__bar t-slider__bar--capsule"
         >
-          <span
-            style="width: 120px; margin-right: 10px;"
-          >
-             选择器标题 
-          </span>
+          <!--v-if-->
           <div
-            class="t-slider-wrap"
+            class="t-slider__line t-slider__line--capsule t-slider__line--single"
+            style=""
           >
-            <!--v-if-->
             <div
-              class="t-slider"
+              class="t-slider__dot"
             >
-              <!-- 总长度 -->
+              <!--v-if-->
               <div
-                class="t-slider__bar"
+                class="t-slider__dot-slider"
               />
-              <!-- 滑块长度 -->
+            </div>
+          </div>
+        </div>
+        <!--v-if-->
+        
+        <!--v-if-->
+      </div>
+      <div
+        class="t-slider t-slider--range"
+      >
+        <!--v-if-->
+        
+        <!--v-if-->
+        <div
+          class="t-slider__bar t-slider__bar--capsule"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__line t-slider__line--capsule"
+            style="left: 0px; right: 0px;"
+          >
+            <div
+              class="t-slider__dot t-slider__dot--left"
+            >
+              <!--v-if-->
               <div
-                class="t-slider__track"
-                style="width: 0%;"
+                class="t-slider__dot-slider"
               />
-              <!-- 滑块操作 -->
-              
+            </div>
+            <div
+              class="t-slider__dot t-slider__dot--right"
+            >
+              <!--v-if-->
               <div
-                class="t-slider__handle"
-                style="left: 0%;"
+                class="t-slider__dot-slider"
               />
-              
-              <!-- 刻度内容 -->
-              <div
-                class="t-slider__mark"
-              >
-                
-                
-              </div>
             </div>
-            <!--v-if-->
-            <!--v-if-->
           </div>
         </div>
+        <!--v-if-->
+        
       </div>
       
+      
     </div>
   </div>
 </div>
@@ -694,173 +956,68 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
 
 exports[`Slider > Slider rangeVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap t-is-value"
+  class="t-slider t-slider--range"
 >
-  <div
-    class="t-slider-wrap__value--left"
-  >
-    0
-  </div>
-  <div
-    class="t-slider"
-  >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="left: 30%; width: 40%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 30%;"
-    />
-    <div
-      class="t-slider__handle"
-      style="left: 70%;"
-    />
-    
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
-    >
-      
-      
-    </div>
-  </div>
+  <!--v-if-->
+  
   <!--v-if-->
   <div
-    class="t-slider-wrap__value"
-  >
-    100
-  </div>
-</div>
-`;
-
-exports[`Slider > Slider titleVue demo works fine 1`] = `
-<div
-  class="flex"
->
-  <span
-    style="width: 120px; margin-right: 10px;"
-  >
-     选择器标题 
-  </span>
-  <div
-    class="t-slider-wrap"
+    class="t-slider__bar t-slider__bar--default"
   >
     <!--v-if-->
     <div
-      class="t-slider"
+      class="t-slider__line t-slider__line--default"
+      style="left: 0px; right: 0px;"
     >
-      <!-- 总长度 -->
       <div
-        class="t-slider__bar"
-      />
-      <!-- 滑块长度 -->
-      <div
-        class="t-slider__track"
-        style="width: 0%;"
-      />
-      <!-- 滑块操作 -->
-      
-      <div
-        class="t-slider__handle"
-        style="left: 0%;"
-      />
-      
-      <!-- 刻度内容 -->
+        class="t-slider__dot t-slider__dot--left"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__dot-slider"
+        />
+      </div>
       <div
-        class="t-slider__mark"
+        class="t-slider__dot t-slider__dot--right"
       >
-        
-        
+        <!--v-if-->
+        <div
+          class="t-slider__dot-slider"
+        />
       </div>
     </div>
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-</div>
-`;
-
-exports[`Slider > Slider unZeroVue demo works fine 1`] = `
-<div
-  class="t-slider-wrap"
->
-  <!--v-if-->
-  <div
-    class="t-slider"
-  >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 0%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 0%;"
-    />
-    
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
-    >
-      
-      
-    </div>
   </div>
   <!--v-if-->
-  <!--v-if-->
+  
 </div>
 `;
 
-exports[`Slider > Slider valueVue demo works fine 1`] = `
+exports[`Slider > Slider stepVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap"
+  class="t-slider"
 >
+  
   <!--v-if-->
   <div
-    class="t-slider"
+    class="t-slider__bar t-slider__bar--default"
   >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 50%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 50%;"
-    />
-    
-    <!-- 刻度内容 -->
+    <!--v-if-->
     <div
-      class="t-slider__mark"
+      class="t-slider__line t-slider__line--default t-slider__line--single"
+      style=""
     >
-      
-      
+      <div
+        class="t-slider__dot"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__dot-slider"
+        />
+      </div>
     </div>
   </div>
-  <div
-    class="t-slider-wrap__value"
-  >
-    50
-  </div>
+  <!--v-if-->
+  
   <!--v-if-->
 </div>
 `;
diff --git a/src/slider/__test__/demo.test.jsx b/src/slider/__test__/demo.test.jsx
index 59bb1a104..3eff83779 100644
--- a/src/slider/__test__/demo.test.jsx
+++ b/src/slider/__test__/demo.test.jsx
@@ -4,23 +4,21 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/slider/demos/base.vue';
-import disableVue from '@/slider/demos/disable.vue';
-import markVue from '@/slider/demos/mark.vue';
+import capsuleVue from '@/slider/demos/capsule.vue';
+import disabledVue from '@/slider/demos/disabled.vue';
+import labelVue from '@/slider/demos/label.vue';
 import mobileVue from '@/slider/demos/mobile.vue';
 import rangeVue from '@/slider/demos/range.vue';
-import titleVue from '@/slider/demos/title.vue';
-import unZeroVue from '@/slider/demos/unZero.vue';
-import valueVue from '@/slider/demos/value.vue';
+import stepVue from '@/slider/demos/step.vue';
 
 const mapper = {
   baseVue,
-  disableVue,
-  markVue,
+  capsuleVue,
+  disabledVue,
+  labelVue,
   mobileVue,
   rangeVue,
-  titleVue,
-  unZeroVue,
-  valueVue,
+  stepVue,
 };
 
 describe('Slider', () => {
diff --git a/src/slider/__test__/index.test.jsx b/src/slider/__test__/index.test.jsx
index 354d995ba..56454abf3 100644
--- a/src/slider/__test__/index.test.jsx
+++ b/src/slider/__test__/index.test.jsx
@@ -12,41 +12,6 @@ const move = async (target, distance) => {
 
 describe('slider', () => {
   describe('props', () => {
-    it(': range', async () => {
-      const value = [30, 70];
-      const range = true;
-      const disabled = true;
-      const onChange = vi.fn();
-      const wrapper = mount(Slider, {
-        props: {
-          value,
-          range,
-          disabled,
-          onChange,
-        },
-      });
-
-      const $slider = wrapper.find(`.${classPrefix}`);
-      const $bar = wrapper.findAll(`.${classPrefix}__handle`);
-      expect($bar.length).toStrictEqual(value.length);
-
-      const event = {
-        clientX: 82,
-        stopPropagation: vi.fn(),
-      };
-
-      // disabled = true, 禁止点击
-      await $slider.trigger('click', { ...event });
-      expect(onChange).toHaveBeenCalledTimes(0);
-
-      // disabled = false
-      await wrapper.setProps({
-        disabled: false,
-      });
-      await $slider.trigger('click', { ...event });
-      expect(onChange).toHaveBeenCalledTimes(1);
-    });
-
     it(': showExtremeValue', async () => {
       const value = [30, 70];
       const showExtremeValue = true;
@@ -57,8 +22,8 @@ describe('slider', () => {
           showExtremeValue,
         },
       });
-      const $left = wrapper.find(`.${classPrefix}-wrap__value--left`);
-      const $right = wrapper.find(`.${classPrefix}-wrap__value`);
+      const $left = wrapper.find(`.${classPrefix}__value--min`);
+      const $right = wrapper.find(`.${classPrefix}__value--max`);
 
       // min = 0, max = 100 (默认)
       expect(Number($left.text())).toStrictEqual(0);
@@ -74,80 +39,30 @@ describe('slider', () => {
       expect(Number($right.text())).toStrictEqual(newMax);
     });
 
-    it(': marks', async () => {
-      const value = [30, 70];
-      const marks = [0, 25, 50, 75, 100]; // Array
-      const label = false;
-      const wrapper = mount(Slider, {
-        props: {
-          value,
-          marks,
-          label,
-        },
-      });
-      const $mark = wrapper.findAll(`.${classPrefix}__mark-text`);
-      expect($mark.length).toStrictEqual(marks.length);
-      $mark.forEach((item, index) => {
-        expect(Number(item.text())).toStrictEqual(marks[index]);
-        expect(item.attributes('style').includes(`left: ${marks[index]}%;`)).toBeTruthy();
-      });
-
-      const newMarks = { 0: '小', 50: '中', 100: '大' }; // Object
-      await wrapper.setProps({
-        marks: newMarks,
-      });
-
-      const $newMarks = wrapper.findAll(`.${classPrefix}__mark-text`);
-      const marks2 = Object.entries(newMarks);
-      expect($newMarks.length).toEqual(marks2.length);
-      $newMarks.forEach((item, index) => {
-        expect(item.text()).toStrictEqual(marks2[index][1]);
-        expect(item.attributes('style').includes(`left: ${marks2[index][0]}%;`)).toBeTruthy();
-      });
-    });
-
     it(': label', async () => {
       const value = 0;
       const wrapper = mount(Slider, {
         props: {
+          label: true,
           value,
         },
       });
 
       // min = 0, max = 100, label = true (默认)
       // label && 滑块条
-      const $label = wrapper.find(`.${classPrefix}-wrap__value`);
-      const $bar = wrapper.findAll(`.${classPrefix}__handle`);
-      expect($bar.length).toStrictEqual(1);
+      const $label = wrapper.find(`.${classPrefix}__dot-value`);
+      const $bar = wrapper.findAll(`.${classPrefix}__line`);
       expect(Number($label.text())).toEqual(value);
-      expect($bar[0].attributes('style').includes(`left: ${value}%;`)).toBeTruthy();
-
       const newValue = 30;
       await wrapper.setProps({
         value: newValue,
       });
       expect(Number($label.text())).toEqual(newValue);
-      expect($bar[0].attributes('style').includes(`left: ${newValue}%;`)).toBeTruthy();
-    });
-  });
-
-  describe('slots', () => {
-    it(': label', () => {
-      const label = `<div class="t-slider__label">label</div>`;
-      const wrapper = mount(Slider, {
-        slots: {
-          label,
-        },
-      });
-      const $label = wrapper.find(`.${classPrefix}-wrap__value`);
-      expect($label.html().includes(label)).toBeTruthy();
     });
   });
 
   describe('event', () => {
-    it(': change && drag-start && drag-end', async () => {
-      const onDragStart = vi.fn();
-      const onDragEnd = vi.fn();
+    it(': change ', async () => {
       const onChange = vi.fn();
       const value = 0;
       const disabled = true;
@@ -155,27 +70,14 @@ describe('slider', () => {
         props: {
           value,
           disabled,
-          onDragStart,
-          onDragEnd,
           onChange,
         },
       });
-      const $bar = wrapper.find(`.${classPrefix}__handle`);
+      const $bar = wrapper.find(`.${classPrefix}__bar`);
 
       // disabled = true, 禁止滑动
       await move($bar, 120);
-      expect(onDragStart).toHaveBeenCalledTimes(0);
-      expect(onDragEnd).toHaveBeenCalledTimes(0);
       expect(onChange).toHaveBeenCalledTimes(0);
-
-      // disabled = false
-      await wrapper.setProps({
-        disabled: false,
-      });
-      await move($bar, 120);
-      expect(onDragStart).toHaveBeenCalledTimes(1);
-      expect(onDragEnd).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledTimes(2);
     });
   });
 });
diff --git a/src/slider/demos/base.vue b/src/slider/demos/base.vue
index f3ae96178..47b03fe71 100644
--- a/src/slider/demos/base.vue
+++ b/src/slider/demos/base.vue
@@ -1,12 +1,3 @@
 <template>
-  <t-slider v-model="value" :label="false" :on-change="onChange" />
+  <t-slider :default-value="23" />
 </template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-const onChange = ($event: number | number[]) => {
-  console.log(`change to ${$event}`);
-};
-</script>
diff --git a/src/slider/demos/capsule.vue b/src/slider/demos/capsule.vue
new file mode 100644
index 000000000..7ab7cc723
--- /dev/null
+++ b/src/slider/demos/capsule.vue
@@ -0,0 +1,21 @@
+<template>
+  <t-slider :default-value="30" theme="capsule" />
+
+  <t-slider :default-value="[40, 60]" range theme="capsule" />
+
+  <t-slider :default-value="[40, 60]" range label="${value}" theme="capsule" />
+
+  <t-slider :default-value="60" :marks="marks" :step="20" theme="capsule" />
+
+  <t-slider :default-value="[20, 80]" range :marks="marks" :step="20" theme="capsule" />
+</template>
+<script lang="ts" setup>
+const marks = {
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+};
+</script>
diff --git a/src/slider/demos/disable.vue b/src/slider/demos/disable.vue
deleted file mode 100644
index f3a2fb2a1..000000000
--- a/src/slider/demos/disable.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <t-slider :default-value="30" :min="30" disabled :label="false" />
-</template>
diff --git a/src/slider/demos/disabled.vue b/src/slider/demos/disabled.vue
new file mode 100644
index 000000000..cc7afb241
--- /dev/null
+++ b/src/slider/demos/disabled.vue
@@ -0,0 +1,28 @@
+<template>
+  <t-slider :value="35" disabled />
+
+  <div class="wrapper">
+    <t-slider show-extreme-value label="${value}" :value="[40, 60]" range disabled />
+  </div>
+
+  <div class="wrapper">
+    <t-slider range :value="[20, 60]" :marks="marks" :step="20" disabled />
+  </div>
+</template>
+<script lang="ts" setup>
+const marks = {
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+};
+</script>
+<style lang="less" scoped>
+.wrapper {
+  margin-top: 16px;
+  background: #fff;
+  padding-top: 20px;
+}
+</style>
diff --git a/src/slider/demos/label.vue b/src/slider/demos/label.vue
new file mode 100644
index 000000000..c546c6148
--- /dev/null
+++ b/src/slider/demos/label.vue
@@ -0,0 +1,12 @@
+<template>
+  <t-slider :value="value" :label="true" :on-change="onChange" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(10);
+const onChange = (e: any) => {
+  value.value = e.value;
+};
+</script>
diff --git a/src/slider/demos/mark.vue b/src/slider/demos/mark.vue
deleted file mode 100644
index 01c3c53b9..000000000
--- a/src/slider/demos/mark.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <t-slider v-model="value" :label="label" :marks="marks" :step="50" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-const label = ref(false);
-const marks = ref({ 0: '小', 50: '中', 100: '大' });
-</script>
diff --git a/src/slider/demos/mobile.vue b/src/slider/demos/mobile.vue
index 7a5c2d1a0..9b0fe09ee 100644
--- a/src/slider/demos/mobile.vue
+++ b/src/slider/demos/mobile.vue
@@ -2,57 +2,34 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Slider 滑动选择器</h1>
     <p class="summary">用于选择横轴上的数值、区间、档位</p>
-    <tdesign-demo-block title="01 类型" summary="基础滑动选择器">
-      <div class="slider-demo">
-        <BaseDemo />
-      </div>
+    <tdesign-demo-block title="01 类型" summary="单游标滑块">
+      <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带数值滑动选择器">
-      <div class="slider-demo">
-        <ValueDemo />
-      </div>
+    <tdesign-demo-block summary="双游标滑块">
+      <rangeDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="起始非零滑动选择器">
-      <div class="slider-demo">
-        <UnZeroDemo />
-      </div>
+    <tdesign-demo-block summary="带数值滑动选择器">
+      <labelDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="带刻度滑动选择器">
-      <div class="slider-demo">
-        <MarkDemo />
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="区间滑动选择器">
-      <div class="slider-demo">
-        <RangeDemo />
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block title="02 状态" summary="滑动选择器禁用状态">
-      <div class="slider-demo">
-        <DisableDemo />
-      </div>
+      <stepDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 规格" summary="无标题滑动选择器">
-      <div class="slider-demo">
-        <BaseDemo />
-      </div>
+    <tdesign-demo-block title="02 组件状态" summary="滑块禁用状态">
+      <disableDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="有标题滑动选择器">
-      <div class="slider-demo">
-        <TitleDemo />
-      </div>
+    <tdesign-demo-block title="03 特殊样式" summary="胶囊型滑块">
+      <capsuleDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
-import BaseDemo from './base.vue';
-import MarkDemo from './mark.vue';
-import ValueDemo from './value.vue';
-import RangeDemo from './range.vue';
-import DisableDemo from './disable.vue';
-import UnZeroDemo from './unZero.vue';
-import TitleDemo from './title.vue';
+import baseDemo from './base.vue';
+import rangeDemo from './range.vue';
+import labelDemo from './label.vue';
+import stepDemo from './step.vue';
+import disableDemo from './disabled.vue';
+import capsuleDemo from './capsule.vue';
 </script>
 
 <style scoped>
diff --git a/src/slider/demos/range.vue b/src/slider/demos/range.vue
index f42f98cbe..db3a2dfdd 100644
--- a/src/slider/demos/range.vue
+++ b/src/slider/demos/range.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-slider v-model="rangeValue" show-extreme-value range @change="onChange" />
+  <t-slider :default-value="rangeValue" range @change="onChange" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/slider/demos/step.vue b/src/slider/demos/step.vue
new file mode 100644
index 000000000..2530f65a3
--- /dev/null
+++ b/src/slider/demos/step.vue
@@ -0,0 +1,17 @@
+<template>
+  <t-slider v-model="value" :marks="marks" :step="20" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(60);
+const marks = ref({
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+});
+</script>
diff --git a/src/slider/demos/title.vue b/src/slider/demos/title.vue
deleted file mode 100644
index 2b88f9592..000000000
--- a/src/slider/demos/title.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="flex">
-    <span :style="{ width: '120px', 'margin-right': '10px' }"> 选择器标题 </span>
-    <t-slider v-model="value" :label="false" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-</script>
-<style>
-.flex {
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/src/slider/demos/unZero.vue b/src/slider/demos/unZero.vue
deleted file mode 100644
index a6c8b4db0..000000000
--- a/src/slider/demos/unZero.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <t-slider :default-value="30" :min="30" :max="200" :label="false"> </t-slider>
-</template>
diff --git a/src/slider/demos/value.vue b/src/slider/demos/value.vue
deleted file mode 100644
index 13caa0233..000000000
--- a/src/slider/demos/value.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <t-slider v-model="value" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-</script>
diff --git a/src/slider/props.ts b/src/slider/props.ts
index 85bfd85f4..ae1113df2 100644
--- a/src/slider/props.ts
+++ b/src/slider/props.ts
@@ -13,7 +13,7 @@ export default {
   /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
   label: {
     type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
-    default: true,
+    default: false,
   },
   /** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
   marks: {
@@ -38,21 +38,29 @@ export default {
     type: Number,
     default: 1,
   },
+  /** 滑块风格 */
+  theme: {
+    type: String as PropType<TdSliderProps['theme']>,
+    default: 'default' as TdSliderProps['theme'],
+    validator(val: TdSliderProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'capsule'].includes(val);
+    },
+  },
   /** 滑块值 */
   value: {
     type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined,
   },
   modelValue: {
     type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined,
   },
   /** 滑块值，非受控属性 */
   defaultValue: {
     type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
+    default: 0,
   },
   /** 滑块值变化时触发 */
   onChange: Function as PropType<TdSliderProps['onChange']>,
-  /** 结束拖动时触发 */
-  onDragend: Function as PropType<TdSliderProps['onDragend']>,
-  /** 开始拖动时触发 */
-  onDragstart: Function as PropType<TdSliderProps['onDragstart']>,
 };
diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md
new file mode 100644
index 000000000..0a7e7469b
--- /dev/null
+++ b/src/slider/slider.en-US.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | false | \- | N
+label | String / Boolean / Slot / Function | false | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+showExtremeValue | Boolean | false | \- | N
+step | Number | 1 | \- | N
+theme | String | default | options：default/capsule | N
+value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
+onDragend | Function |  | Typescript：`() => void`<br/> | N
+onDragstart | Function |  | Typescript：`() => void`<br/> | N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(value: SliderValue)` | \-
+dragend | \- | \-
+dragstart | \- | \-
diff --git a/src/slider/slider.md b/src/slider/slider.md
index 9ff215abc..829069fb1 100644
--- a/src/slider/slider.md
+++ b/src/slider/slider.md
@@ -6,23 +6,20 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 disabled | Boolean | false | 是否禁用组件 | N
-label | String / Boolean / Slot / Function | true | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> | SliderMarks` `interface SliderMarks { [mark: number]: string | TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+label | String / Boolean / Slot / Function | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 max | Number | 100 | 滑块范围最大值 | N
 min | Number | 0 | 滑块范围最小值 | N
 range | Boolean | false | 双游标滑块 | N
 showExtremeValue | Boolean | false | 是否边界值 | N
 step | Number | 1 | 步长 | N
-value | Number / Array | - | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number | Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
-defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number | Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+theme | String | default | 滑块风格。可选项：default/capsule | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
-onDragend | Function |  | TS 类型：`() => void`<br/>结束拖动时触发 | N
-onDragstart | Function |  | TS 类型：`() => void`<br/>开始拖动时触发 | N
 
 ### Slider Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SliderValue)` | 滑块值变化时触发
-dragend | \- | 结束拖动时触发
-dragstart | \- | 开始拖动时触发
diff --git a/src/slider/slider.vue b/src/slider/slider.vue
index 439b28a87..99df452fc 100644
--- a/src/slider/slider.vue
+++ b/src/slider/slider.vue
@@ -1,51 +1,149 @@
 <template>
   <div ref="rootRef" :class="classes">
-    <div v-if="showExtremeValue" :class="`${name}-wrap__value--left`">{{ min }}</div>
-    <div :class="`${name}`" @click="onClick">
-      <!-- 总长度 -->
-      <div ref="barRef" :class="`${name}__bar`"></div>
-      <!-- 滑块长度 -->
-      <div :class="`${name}__track`" :style="trackStyle"></div>
-      <!-- 滑块操作 -->
-      <div
-        v-for="(item, index) in dots"
-        :key="index + 1"
-        :class="handleClass"
-        :style="`left:${getPercentage(item)}%`"
-        @touchstart="onTouchStart($event, item)"
-        @touchmove="onTouchMove($event, index)"
-        @touchend="onTouchEnd($event, index)"
-      ></div>
-      <!-- 刻度内容 -->
-      <div v-if="marksData" :class="`${name}__mark`">
+    <template v-if="!range">
+      <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--min`]">{{
+        label ? getValue(label, min) : min
+      }}</text>
+      <div ref="sliderLine" :class="sliderLineClasses">
+        <template v-if="state.isScale">
+          <div
+            v-for="(item, index) in state.scaleArray"
+            :key="index"
+            :style="`left: ${item.left}px; transform: translateX(-50%);`"
+            :class="[
+              `${name}__scale-item`,
+              `${name}__scale-item--${theme}`,
+              {
+                [`${name}__scale-item--active`]: Number(value) >= item.val,
+                [`${name}__scale-item--disabled`]: disabled,
+                [`${name}__scale-item--hidden`]:
+                  ((index == 0 || index == state.scaleArray.length - 1) && theme == 'capsule') || value == item.val,
+              },
+            ]"
+          >
+            <div v-if="state.scaleTextArray.length" :class="[`${name}__scale-desc`, `${name}__scale-desc--${theme}`]">
+              {{ state.scaleTextArray[index] }}
+            </div>
+          </div>
+        </template>
         <div
-          v-for="(v, k) in marksData"
-          :key="k"
-          :class="`${name}__mark-text t-is-${value && value > v[0] ? 'active' : ''}`"
-          :style="`left: ${getPercentage(v[0])}%`"
+          :class="[
+            `${name}__line`,
+            `${name}__line--${theme}`,
+            `${name}__line--single`,
+            { [`${name}__line--disabled`]: disabled },
+          ]"
+          :style="`width: ${lineBarWidth}px`"
         >
-          {{ typeof v[1] === 'function' ? v[1](v[0]) : v[1] }}
+          <div
+            ref="singleDot"
+            :class="`${name}__dot`"
+            @touchmove="onSingleLineTap"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+            <div v-if="label" :class="[`${name}__dot-value`, { [`${name}__dot-value--sr-only`]: !label }]">
+              {{ getValue(label, value) || value }}
+            </div>
+            <div :class="`${name}__dot-slider`"></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div v-if="labelContent" :class="`${name}-wrap__value`">
-      <t-node :content="labelContent"></t-node>
-    </div>
-    <div v-if="showExtremeValue" :class="`${name}-wrap__value`">{{ max }}</div>
+      <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--max`]">
+        {{ label ? getValue(label, max) : max }}
+      </text>
+    </template>
+    <template v-if="range">
+      <text v-if="showExtremeValue" :class="[`${name}__range-extreme`, `${name}__range-extreme--min`]">{{ min }}</text>
+      <div ref="sliderLine" :class="sliderLineClasses">
+        <template v-if="state.isScale">
+          <div
+            v-for="(item, index) in state.scaleArray"
+            :key="index"
+            :style="`left: ${item.left}px; transform: translateX(-50%);`"
+            :class="[
+              `${name}__scale-item`,
+              `${name}__scale-item--${theme}`,
+              {
+                [`${name}__scale-item--active`]: state.dotTopValue[1] >= item.val && item.val >= state.dotTopValue[0],
+                [`${name}__scale-item--disabled`]: disabled,
+                [`${name}__scale-item--hidden`]:
+                  ((index == 0 || index == state.scaleArray.length - 1) && theme == 'capsule') || value == item.val,
+              },
+            ]"
+          >
+            <div v-if="state.scaleTextArray.length" :class="[`${name}__scale-desc`, `${name}__scale-desc--${theme}`]">
+              {{ state.scaleTextArray[index] }}
+            </div>
+          </div>
+        </template>
+        <div
+          :class="[`${name}__line`, `${name}__line--${theme}`, { [`${name}__line--disabled`]: disabled }]"
+          :style="`left: ${state.lineLeft}px; right: ${state.lineRight}px`"
+        >
+          <div
+            ref="leftDot"
+            :class="[`${name}__dot`, `${name}__dot--left`]"
+            @touchmove="onTouchMoveLeft"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+            <div v-if="label" :class="[`${name}__dot-value`, { [`${name}__dot-value--sr-only`]: !label }]">
+              {{ getValue(label, state.dotTopValue[0]) || state.dotTopValue[0] }}
+            </div>
+            <div :class="`${name}__dot-slider`"></div>
+          </div>
+          <div
+            ref="rightDot"
+            :class="[`${name}__dot`, `${name}__dot--right`]"
+            @touchmove="onTouchMoveRight"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+            <div v-if="label" :class="[`${name}__dot-value`, { [`${name}__dot-value--sr-only`]: !label }]">
+              {{ getValue(label, state.dotTopValue[1]) || state.dotTopValue[1] }}
+            </div>
+            <div :class="`${name}__dot-slider`"></div>
+          </div>
+        </div>
+      </div>
+      <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--max`]">{{ max }}</text>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance } from 'vue';
+import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance, provide, watch, onMounted } from 'vue';
 import config from '../config';
 import props from './props';
 import { useVModel } from '../shared/useVModel';
-import { renderTNode, TNode } from '../shared';
+import { renderTNode, TNode, useEmitEvent } from '../shared';
+import { trimSingleValue, trimValue } from './tool';
+import type { SliderValue } from './type';
 import { useFormDisabled } from '../form/hooks';
 
 const { prefix } = config;
 const name = `${prefix}-slider`;
-const { isArray } = Array;
+
+type dataType = {
+  sliderStyles: string;
+  classPrefix: string;
+  initialLeft: number;
+  initialRight: number;
+  activeLeft: number;
+  activeRight: number;
+  maxRange: number;
+  lineLeft: number;
+  lineRight: number;
+  dotTopValue: number[];
+  blockSize: number;
+  isScale: boolean;
+  scaleArray: any[];
+  scaleTextArray: any[];
+  _value: SliderValue;
+  prefix: string;
+  isVisibleToScreenReader: boolean;
+};
 
 export interface TouchData {
   startValue: number;
@@ -57,208 +155,259 @@ export interface TouchData {
 
 export default defineComponent({
   name,
-  components: { TNode },
   props,
-  emits: ['drag-start', 'drag-end', 'update:modelValue', 'change'],
+  emits: ['change'],
   setup(props, context) {
     const disabled = useFormDisabled();
-    const rootRef = ref<HTMLElement | null>(null);
-    const barRef = ref<HTMLElement | null>(null);
+    const sliderLine = ref<HTMLElement>();
+    const rootRef = ref<HTMLElement>();
+    const state: dataType = reactive({
+      // 按钮样式列表
+      sliderStyles: '',
+      classPrefix: name,
+      initialLeft: 0,
+      initialRight: 0,
+      activeLeft: 0,
+      activeRight: 0,
+      maxRange: 0,
+      lineLeft: 0,
+      lineRight: 0,
+      dotTopValue: [0, 0],
+      _value: 0,
+      blockSize: 20,
+      isScale: false,
+      scaleArray: [],
+      scaleTextArray: [],
+      prefix,
+      isVisibleToScreenReader: false,
+    });
+    const emitEvent = useEmitEvent(props, context.emit);
+
     const defaultValue = props.defaultValue || props.min;
-    const { value, modelValue, max, min } = toRefs(props);
+    const { value, modelValue, label, max, min, theme, marks, step, range } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, modelValue, defaultValue, props.onChange);
+
+    watch(
+      () => innerValue.value,
+      (val: any) => {
+        if (range.value) {
+          const left = (state.maxRange * (val[0] - Number(min.value))) / (Number(max.value) - Number(min.value));
+          const right = (state.maxRange * (Number(max.value) - val[1])) / (Number(max.value) - Number(min.value));
+          // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
+          setLineStyle(left, right);
+        } else {
+          setSingleBarWidth(val as number);
+        }
+      },
+    );
+
     const internalInstance = getCurrentInstance();
     const labelContent = computed(
       () =>
-        !props.range &&
-        props.label &&
+        !range.value &&
+        label.value &&
         (typeof renderTNode(internalInstance, 'label') === 'object'
           ? renderTNode(internalInstance, 'label')
           : `${innerValue.value}`),
     );
 
-    const isRange = computed(() => {
-      return props.range && isArray(innerValue.value) && innerValue.value.length === 2;
-    });
-    const dots = computed(() => {
-      if (isRange.value) return innerValue.value;
-
-      if (typeof innerValue.value === 'number') return [innerValue.value];
-      return [];
-    });
-
     const classes = computed(() => [
-      `${name}-wrap`,
+      `${name}`,
       {
-        [`${prefix}-is-disabled`]: disabled.value,
-        [`${prefix}-is-mark`]: props.marks,
-        [`${prefix}-is-value`]: props.showExtremeValue,
+        [`${name}--top`]: label.value || state.scaleTextArray.length,
+        [`${name}--disabled`]: disabled.value,
+        [`${name}--range`]: range.value,
       },
     ]);
-    const handleClass = computed(() => [`${name}__handle`]);
-    const marksData = computed(() => {
-      const sorter = (a: number[], b: number[]) => a[0] - b[0];
-      if (!props.range && props.marks) {
-        if (isArray(props.marks)) {
-          return props.marks.map((val: number) => [val, val]).sort(sorter);
-        }
-        return Object.entries(props.marks)
-          .map(([key, value]) => [parseInt(key, 10), value])
-          .sort(sorter);
-      }
-      return [];
-    });
-
-    const dragStatus = ref<string>('');
-    const touchData = reactive<TouchData>({
-      startValue: 0,
-      newValue: 0,
-      startX: 0,
-      deltaX: 0,
-      offsetX: 0,
-    });
 
-    function onTouchStart(event: TouchEvent, value: number) {
-      if (disabled.value) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      touchData.deltaX = 0;
-      touchData.offsetX = 0;
-      touchData.startX = event.touches[0].clientX;
-      touchData.startValue = format(value);
-      dragStatus.value = 'start';
-    }
+    const sliderLineClasses = computed(() => [
+      `${name}__bar`,
+      `${name}__bar--${theme.value}`,
+      {
+        [`${name}__bar--disabled`]: disabled.value,
+        [`${name}__bar--marks`]: state.isScale && theme.value === 'capsule',
+      },
+    ]);
 
-    function onTouchMove(event: TouchEvent, index: number) {
-      if (disabled.value) return;
-      if (!barRef.value) return;
+    const lineBarWidth = ref<number>();
+    const setSingleBarWidth = (value: number) => {
+      const halfBlock = theme.value === 'capsule' ? Number(state.blockSize) / 2 : 0;
+      const percentage = (Number(value) - Number(min.value)) / (Number(max.value) - Number(min.value));
+      lineBarWidth.value = percentage * state.maxRange + halfBlock;
+    };
 
-      event.stopPropagation();
-      event.preventDefault();
-      if (dragStatus.value === 'start') {
-        context.emit('drag-start');
+    onMounted(() => {
+      getInitialStyle();
+      if (range.value) {
+        const left = // @ts-ignore
+          (state.maxRange * (innerValue.value[0] - Number(min.value))) / (Number(max.value) - Number(min.value));
+        const right = // @ts-ignore
+          (state.maxRange * (Number(max.value) - innerValue.value[1])) / (Number(max.value) - Number(min.value));
+        // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
+        setLineStyle(left, right);
+      } else {
+        setSingleBarWidth(innerValue.value as number);
       }
-      const touch = event.touches[0];
-      touchData.deltaX = touch.clientX - touchData.startX;
-      touchData.offsetX = Math.abs(touchData.deltaX);
-      dragStatus.value = 'dragging';
+      if (marks.value) {
+        handleMask(marks.value);
+      }
+    });
 
-      const rect = barRef.value.getBoundingClientRect();
-      const delta = touchData.deltaX;
-      const total = rect.width;
-      const diff = (delta / total) * (props.max - props.min);
+    const setLineStyle = (left: number, right: number) => {
+      const halfBlock = (theme.value as string) === 'capsule' ? Number(state.blockSize) / 2 : 0;
+      const [a, b] = innerValue.value as any;
+      const cut = (v: any) => parseInt(v, 10);
 
-      touchData.newValue = touchData.startValue + diff;
-      updateValue(touchData.newValue, index);
-    }
+      state.dotTopValue = [a, b];
 
-    function onTouchEnd(event: TouchEvent, index: number) {
-      if (disabled.value) {
-        return;
+      if (left + right <= state.maxRange) {
+        state.lineLeft = cut(left + halfBlock);
+        state.lineRight = cut(right + halfBlock);
+      } else {
+        state.lineLeft = cut(state.maxRange + halfBlock - right);
+        state.lineRight = cut(state.maxRange - left + halfBlock * 1.5);
       }
-      event.stopPropagation();
-      event.preventDefault();
+    };
 
-      if (dragStatus.value === 'dragging') {
-        updateValue(touchData.newValue, index, true);
-        context.emit('drag-end');
+    const getInitialStyle = () => {
+      const line = sliderLine.value?.getBoundingClientRect() as DOMRect;
+      const halfBlock = Number(state.blockSize) / 2;
+      const maxRange = line.right - line.left;
+      state.maxRange = maxRange;
+      state.initialLeft = line.left;
+      state.initialRight = line.right;
+      if (theme.value === 'capsule') {
+        state.maxRange = maxRange - Number(state.blockSize) - 6; // 6 是边框宽度
+        state.initialLeft -= halfBlock;
+        state.initialRight -= halfBlock;
       }
+    };
 
-      dragStatus.value = '';
-    }
-
-    function onClick(event: MouseEvent) {
-      event.stopPropagation();
+    const onTouchEnd = (e: TouchEvent) => {};
 
+    // 点击滑动条的事件
+    const onSingleLineTap = (e: TouchEvent | MouseEvent) => {
       if (disabled.value) return;
-      if (!barRef.value) return;
-
-      const rect = barRef.value.getBoundingClientRect();
-      const delta = event.clientX - rect.left;
-      const total = rect.width;
-      const current = +props.min + (delta / total) * (props.max - props.min);
+      const value = getSingleChangeValue(e as any);
+      setInnerValue(value);
+      triggerValue(value);
+    };
 
-      let index = 0;
-      if (props.range && innerValue.value) {
-        if (Math.abs(current - innerValue.value[0]) > Math.abs(current - innerValue.value[1])) {
-          index = 1;
-        }
+    const getSingleChangeValue = (e: TouchEvent) => {
+      const [touch] = e.changedTouches;
+      const { pageX } = touch;
+      const currentLeft = pageX - state.initialLeft;
+      let value = 0;
+      if (currentLeft <= 0) {
+        value = Number(min.value);
+      } else if (currentLeft >= state.maxRange) {
+        value = Number(max.value);
+      } else {
+        value = Math.round(
+          (currentLeft / state.maxRange) * (Number(max.value) - Number(min.value)) + Number(min.value),
+        );
       }
+      return stepValue(value);
+    };
 
-      touchData.startValue = innerValue.value?.[index];
-      updateValue(current, index, true);
-    }
+    const triggerValue = (value: SliderValue) => {
+      emitEvent('change', { value: trimValue(value, props) });
+    };
 
-    function format(value: number): number {
-      let current = value;
-      if (!props.range && props.marks) {
-        if (marksData?.value?.length) {
-          let [min] = marksData.value[0];
-          marksData.value.forEach(([marksDataItemValue]) => {
-            if (Math.abs(marksDataItemValue - value) < Math.abs(min - value)) {
-              min = marksDataItemValue;
-            }
-          });
-          current = min;
-        }
-      }
-      return Math.round(Math.max(props.min, Math.min(current, props.max)) / props.step) * props.step;
-    }
+    const stepValue = (value: number): number => {
+      if (Number(step.value) < 1 || Number(step.value) > Number(max.value) - Number(min.value)) return value;
+      const closestStep = trimSingleValue(
+        Math.round(value / Number(step.value)) * Number(step.value),
+        Number(min.value),
+        Number(max.value),
+      );
 
-    function updateValue(newValue: number, index: number, end = false) {
-      const formatValue = format(newValue);
-      if (props.range && Array.isArray(innerValue.value)) {
-        const tmpValue = [...innerValue.value];
-        tmpValue[index] = formatValue;
+      return closestStep as number;
+    };
 
-        if (end && formatValue !== touchData.startValue) {
-          tmpValue.sort((a, b) => a - b);
-          setInnerValue(tmpValue);
-        } else if (formatValue !== touchData.startValue) {
-          setInnerValue(tmpValue);
-        }
-      } else if (formatValue !== touchData.startValue) {
-        setInnerValue(formatValue);
-      }
-    }
+    const getValue = (label: any, value: any) => {
+      const REGEXP = /[$][{value}]{7}/;
+      if (label && label === 'true') return value;
+      if (REGEXP.test(label)) return label.replace(REGEXP, value);
+    };
 
-    const getPercentage = (value: number | undefined): number =>
-      ((value ? value - props.min : 0) / (props.max - props.min)) * 100;
-    const trackStyle = computed(() => {
-      if (props.range && isArray(innerValue.value)) {
-        return {
-          left: `${getPercentage(Math.min(innerValue.value[0], innerValue.value[1]))}%`,
-          width: `${getPercentage(Math.abs(innerValue.value[1] - innerValue.value[0]))}%`,
-        };
+    const handleMask = (marks: any) => {
+      const calcPos = (arr: number[]) => {
+        const margin = (theme.value as any) === 'capsule' ? state.blockSize / 2 : 0;
+        return arr.map((item) => ({
+          val: item,
+          left: Math.round((item / 100) * state.maxRange) + margin,
+        }));
+      };
+      if (marks?.length && Array.isArray(marks)) {
+        state.isScale = true;
+        state.scaleArray = calcPos(marks);
+        state.scaleTextArray = [];
       }
-      if (!isArray(innerValue.value)) {
-        return {
-          width: `${getPercentage(innerValue.value)}%`,
-        };
+
+      if (Object.prototype.toString.call(marks) === '[object Object]') {
+        const scaleArray = Object.keys(marks).map((item) => Number(item));
+        const scaleTextArray = scaleArray.map((item) => marks[item]);
+        state.isScale = scaleArray.length > 0;
+        state.scaleArray = calcPos(scaleArray);
+        state.scaleTextArray = scaleTextArray;
       }
-      return {};
-    });
+    };
+
+    /**
+     * 将位置转换为值
+     *
+     * @param {number} posValue 位置数据
+     * @param {(0 | 1)} dir 方向： 0-left， 1-right
+     * @return  {number}
+     * @memberof Slider
+     */
+    const convertPosToValue = (posValue: number, dir: 0 | 1): number => {
+      return dir === 0
+        ? (posValue / state.maxRange) * (Number(max.value) - Number(min.value)) + Number(min.value)
+        : Number(max.value) - (posValue / state.maxRange) * (Number(max.value) - Number(min.value));
+    };
+
+    const onTouchMoveLeft = (e: TouchEvent) => {
+      if (disabled.value) return;
+      const [touch] = e.changedTouches;
+      const { pageX } = touch;
+      const currentLeft = pageX - state.initialLeft;
+      const newData = [...(innerValue.value as number[])];
+      const leftValue = convertPosToValue(currentLeft, 0);
+      newData[0] = stepValue(leftValue);
+      setInnerValue(newData);
+      triggerValue(newData);
+    };
+
+    const onTouchMoveRight = (e: TouchEvent) => {
+      if (disabled.value) return;
+      const [touch] = e.changedTouches;
+      const { pageX } = touch;
+      const currentRight = -(pageX - state.initialRight);
+      const newData = [...(innerValue.value as number[])];
+      const rightValue = convertPosToValue(currentRight, 1);
+      newData[1] = stepValue(rightValue);
+      setInnerValue(newData);
+      triggerValue(newData);
+    };
 
     return {
-      max,
-      min,
+      state,
       name: ref(name),
-      marksData,
       rootRef,
-      barRef,
-      dots,
+      sliderLine,
+      lineBarWidth,
       value: innerValue,
       labelContent,
       classes,
-      handleClass,
-      trackStyle,
-      getPercentage,
-      onTouchStart,
-      onTouchMove,
+      sliderLineClasses,
+      disabled,
       onTouchEnd,
-      onClick,
+      onSingleLineTap,
+      onTouchMoveLeft,
+      onTouchMoveRight,
+      getValue,
     };
   },
 });
diff --git a/src/slider/style/index.js b/src/slider/style/index.js
index ec130ce39..586efd577 100644
--- a/src/slider/style/index.js
+++ b/src/slider/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/slider/_index.less';
+import '../../_common/style/mobile/components/slider/v2/_index.less';
diff --git a/src/slider/tool.ts b/src/slider/tool.ts
new file mode 100644
index 000000000..ffe39676d
--- /dev/null
+++ b/src/slider/tool.ts
@@ -0,0 +1,48 @@
+/**
+ * 处理单个number的超限和异常
+ * @param {any} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+export const trimSingleValue = (value: any, min: number, max: number): number => {
+  if (typeof value !== 'number') {
+    return min;
+  }
+  if (value < min) {
+    return min;
+  }
+
+  if (value > max) {
+    return max;
+  }
+
+  return value;
+};
+
+/**
+ * 处理超限和异常value
+ * @param value
+ * @param props
+ * @returns
+ */
+export const trimValue = (value: number | number[], props: any): number | number[] => {
+  const { min, max, range } = props;
+
+  if (range && Array.isArray(value)) {
+    value[0] = trimSingleValue(value[0], min, max);
+    value[1] = trimSingleValue(value[1], min, max);
+
+    return value[0] <= value[1] ? value : [value[1], value[0]];
+  }
+
+  if (range) {
+    return [min, max];
+  }
+
+  if (!range) {
+    return trimSingleValue(value, min, max);
+  }
+
+  return [];
+};
diff --git a/src/slider/type.ts b/src/slider/type.ts
index f171765b8..7296c0d21 100644
--- a/src/slider/type.ts
+++ b/src/slider/type.ts
@@ -14,7 +14,7 @@ export interface TdSliderProps {
   disabled?: boolean;
   /**
    * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
-   * @default true
+   * @default false
    */
   label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
   /**
@@ -46,30 +46,30 @@ export interface TdSliderProps {
    * @default 1
    */
   step?: number;
+  /**
+   * 滑块风格
+   * @default default
+   */
+  theme?: 'default' | 'capsule';
   /**
    * 滑块值
+   * @default 0
    */
   value?: SliderValue;
   /**
    * 滑块值，非受控属性
+   * @default 0
    */
   defaultValue?: SliderValue;
   /**
    * 滑块值
+   * @default 0
    */
   modelValue?: SliderValue;
   /**
    * 滑块值变化时触发
    */
   onChange?: (value: SliderValue) => void;
-  /**
-   * 结束拖动时触发
-   */
-  onDragend?: () => void;
-  /**
-   * 开始拖动时触发
-   */
-  onDragstart?: () => void;
 }
 
 export interface SliderMarks {