diff --git a/src/slider/__test__/__snapshots__/demo.test.jsx.snap b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
index 170637b98..751f950ac 100644
--- a/src/slider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,31 +2,37 @@
 
 exports[`Slider > Slider baseVue demo works fine 1`] = `
 <div
-  class="t-slider"
+  class="wrapper"
+  data-v-5350d6f5=""
 >
-  
-  <!--v-if-->
   <div
-    class="t-slider__bar t-slider__bar--default"
+    class="t-slider"
+    data-v-5350d6f5=""
   >
+    
     <!--v-if-->
     <div
-      class="t-slider__line t-slider__line--default t-slider__line--single"
-      style=""
+      class="t-slider__bar t-slider__bar--default"
     >
+      <!--v-if-->
       <div
-        class="t-slider__dot"
+        class="t-slider__line t-slider__line--default t-slider__line--single"
+        style=""
       >
-        <!--v-if-->
         <div
-          class="t-slider__dot-slider"
-        />
+          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>
 `;
 
@@ -36,171 +42,201 @@ exports[`Slider > Slider capsuleVue demo works fine 1`] = `
 >
   
   <div
-    class="t-slider"
+    class="wrapper"
+    data-v-a6c0268e=""
   >
-    
-    <!--v-if-->
     <div
-      class="t-slider__bar t-slider__bar--capsule"
+      class="t-slider"
+      data-v-a6c0268e=""
     >
+      
       <!--v-if-->
       <div
-        class="t-slider__line t-slider__line--capsule t-slider__line--single"
-        style=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot"
+          class="t-slider__line t-slider__line--capsule t-slider__line--single"
+          style=""
         >
-          <!--v-if-->
           <div
-            class="t-slider__dot-slider"
-          />
+            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>
   <div
-    class="t-slider t-slider--range"
+    class="wrapper"
+    data-v-a6c0268e=""
   >
-    <!--v-if-->
-    
-    <!--v-if-->
     <div
-      class="t-slider__bar t-slider__bar--capsule"
+      class="t-slider t-slider--range"
+      data-v-a6c0268e=""
     >
+      <!--v-if-->
+      
       <!--v-if-->
       <div
-        class="t-slider__line t-slider__line--capsule"
-        style="left: 0px; right: 0px;"
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot t-slider__dot--left"
+          class="t-slider__line t-slider__line--capsule"
+          style="left: 0px; right: 0px;"
         >
-          <!--v-if-->
           <div
-            class="t-slider__dot-slider"
-          />
-        </div>
-        <div
-          class="t-slider__dot t-slider__dot--right"
-        >
-          <!--v-if-->
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
           <div
-            class="t-slider__dot-slider"
-          />
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
         </div>
       </div>
+      <!--v-if-->
+      
     </div>
-    <!--v-if-->
-    
   </div>
   <div
-    class="t-slider t-slider--top t-slider--range"
+    class="wrapper"
+    data-v-a6c0268e=""
   >
-    <!--v-if-->
-    
-    <!--v-if-->
     <div
-      class="t-slider__bar t-slider__bar--capsule"
+      class="t-slider t-slider--top t-slider--range"
+      data-v-a6c0268e=""
     >
+      <!--v-if-->
+      
       <!--v-if-->
       <div
-        class="t-slider__line t-slider__line--capsule"
-        style="left: 0px; right: 0px;"
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot t-slider__dot--left"
+          class="t-slider__line t-slider__line--capsule"
+          style="left: 0px; right: 0px;"
         >
           <div
-            class="t-slider__dot-value"
+            class="t-slider__dot t-slider__dot--left"
           >
-            0
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
           </div>
           <div
-            class="t-slider__dot-slider"
-          />
-        </div>
-        <div
-          class="t-slider__dot t-slider__dot--right"
-        >
-          <div
-            class="t-slider__dot-value"
+            class="t-slider__dot t-slider__dot--right"
           >
-            0
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
           </div>
-          <div
-            class="t-slider__dot-slider"
-          />
         </div>
       </div>
+      <!--v-if-->
+      
     </div>
-    <!--v-if-->
-    
   </div>
   <div
-    class="t-slider"
+    class="wrapper"
+    data-v-a6c0268e=""
   >
-    
-    <!--v-if-->
     <div
-      class="t-slider__bar t-slider__bar--capsule"
+      class="t-slider"
+      data-v-a6c0268e=""
     >
+      
       <!--v-if-->
       <div
-        class="t-slider__line t-slider__line--capsule t-slider__line--single"
-        style=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot"
+          class="t-slider__line t-slider__line--capsule t-slider__line--single"
+          style=""
         >
-          <!--v-if-->
           <div
-            class="t-slider__dot-slider"
-          />
+            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>
   <div
-    class="t-slider t-slider--range"
+    class="wrapper"
+    data-v-a6c0268e=""
   >
-    <!--v-if-->
-    
-    <!--v-if-->
     <div
-      class="t-slider__bar t-slider__bar--capsule"
+      class="t-slider t-slider--range"
+      data-v-a6c0268e=""
     >
+      <!--v-if-->
+      
       <!--v-if-->
       <div
-        class="t-slider__line t-slider__line--capsule"
-        style="left: 0px; right: 0px;"
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot t-slider__dot--left"
+          class="t-slider__line t-slider__line--capsule"
+          style="left: 0px; right: 0px;"
         >
-          <!--v-if-->
           <div
-            class="t-slider__dot-slider"
-          />
-        </div>
-        <div
-          class="t-slider__dot t-slider__dot--right"
-        >
-          <!--v-if-->
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
           <div
-            class="t-slider__dot-slider"
-          />
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
         </div>
       </div>
+      <!--v-if-->
+      
     </div>
-    <!--v-if-->
-    
   </div>
   
 </div>
@@ -212,32 +248,37 @@ exports[`Slider > Slider disabledVue demo works fine 1`] = `
 >
   
   <div
-    class="t-slider t-slider--disabled"
+    class="wrapper"
     data-v-53635720=""
   >
-    
-    <!--v-if-->
     <div
-      class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+      class="t-slider t-slider--disabled"
+      data-v-53635720=""
     >
+      
       <!--v-if-->
       <div
-        class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
-        style=""
+        class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot"
+          class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
+          style=""
         >
-          <!--v-if-->
           <div
-            class="t-slider__dot-slider"
-          />
+            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>
   <div
     class="wrapper"
@@ -343,35 +384,104 @@ exports[`Slider > Slider disabledVue demo works fine 1`] = `
 
 exports[`Slider > Slider labelVue demo works fine 1`] = `
 <div
-  class="t-slider t-slider--top"
+  data-v-app=""
 >
   
-  <!--v-if-->
   <div
-    class="t-slider__bar t-slider__bar--default"
+    class="wrapper"
+    data-v-61756b00=""
   >
-    <!--v-if-->
     <div
-      class="t-slider__line t-slider__line--default t-slider__line--single"
-      style=""
+      class="t-slider t-slider--top"
+      data-v-61756b00=""
     >
+      
+      <!--v-if-->
       <div
-        class="t-slider__dot"
+        class="t-slider__bar t-slider__bar--default"
       >
+        <!--v-if-->
         <div
-          class="t-slider__dot-value"
+          class="t-slider__line t-slider__line--default t-slider__line--single"
+          style=""
         >
-          10
+          <div
+            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>
+  </div>
+  <div
+    class="wrapper"
+    data-v-61756b00=""
+  >
+    <div
+      class="t-slider t-slider--top t-slider--range"
+      data-v-61756b00=""
+    >
+      <!--v-if-->
+      
+      <text
+        class="t-slider__range-extreme t-slider__range-extreme--min"
+      >
+        0
+      </text>
+      <div
+        class="t-slider__bar t-slider__bar--default"
+      >
+        <!--v-if-->
         <div
-          class="t-slider__dot-slider"
-        />
+          class="t-slider__line t-slider__line--default"
+          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>
-  <!--v-if-->
   
-  <!--v-if-->
 </div>
 `;
 
@@ -415,32 +525,38 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="t-slider"
+        class="wrapper"
+        data-v-5350d6f5=""
         data-v-98828574=""
       >
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--default"
+          class="t-slider"
+          data-v-5350d6f5=""
         >
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--default t-slider__line--single"
-            style=""
+            class="t-slider__bar t-slider__bar--default"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot"
+              class="t-slider__line t-slider__line--default t-slider__line--single"
+              style=""
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
+                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>
       
     </div>
@@ -464,40 +580,46 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="t-slider t-slider--range"
+        class="wrapper"
+        data-v-58e1d8c9=""
         data-v-98828574=""
       >
-        <!--v-if-->
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--default"
+          class="t-slider t-slider--range"
+          data-v-58e1d8c9=""
         >
+          <!--v-if-->
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--default"
-            style="left: 0px; right: 0px;"
+            class="t-slider__bar t-slider__bar--default"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot t-slider__dot--left"
+              class="t-slider__line t-slider__line--default"
+              style="left: 0px; right: 0px;"
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
-            </div>
-            <div
-              class="t-slider__dot t-slider__dot--right"
-            >
-              <!--v-if-->
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
               <div
-                class="t-slider__dot-slider"
-              />
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
             </div>
           </div>
+          <!--v-if-->
+          
         </div>
-        <!--v-if-->
-        
       </div>
       
     </div>
@@ -513,46 +635,110 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        带数值滑动选择器
+        带数值单游标/双游标滑块
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="t-slider t-slider--top"
-        data-v-98828574=""
+        class="wrapper"
+        data-v-61756b00=""
       >
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--default"
+          class="t-slider t-slider--top"
+          data-v-61756b00=""
         >
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--default t-slider__line--single"
-            style=""
+            class="t-slider__bar t-slider__bar--default"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot"
+              class="t-slider__line t-slider__line--default t-slider__line--single"
+              style=""
             >
               <div
-                class="t-slider__dot-value"
+                class="t-slider__dot"
               >
-                10
+                <div
+                  class="t-slider__dot-value"
+                >
+                  10
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
               </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-61756b00=""
+      >
+        <div
+          class="t-slider t-slider--top t-slider--range"
+          data-v-61756b00=""
+        >
+          <!--v-if-->
+          
+          <text
+            class="t-slider__range-extreme t-slider__range-extreme--min"
+          >
+            0
+          </text>
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default"
+              style="left: 0px; right: 0px;"
+            >
               <div
-                class="t-slider__dot-slider"
-              />
+                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>
-        <!--v-if-->
-        
-        <!--v-if-->
       </div>
       
+      
     </div>
   </div>
   <div
@@ -566,42 +752,90 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        带刻度滑动选择器
+        带刻度单游标/双游标滑块
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
+      <div
+        class="wrapper"
+        data-v-0f126170=""
+      >
+        <div
+          class="t-slider"
+          data-v-0f126170=""
+        >
+          
+          <!--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__dot"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
       <div
-        class="t-slider"
-        data-v-98828574=""
+        class="wrapper"
+        data-v-0f126170=""
       >
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--default"
+          class="t-slider t-slider--range"
+          data-v-0f126170=""
         >
+          <!--v-if-->
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--default t-slider__line--single"
-            style=""
+            class="t-slider__bar t-slider__bar--default"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot"
+              class="t-slider__line t-slider__line--default"
+              style="left: 0px; right: 0px;"
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
+                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>
-        <!--v-if-->
-        
-        <!--v-if-->
       </div>
       
+      
     </div>
   </div>
   <div
@@ -628,32 +862,37 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-slider t-slider--disabled"
+        class="wrapper"
         data-v-53635720=""
       >
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+          class="t-slider t-slider--disabled"
+          data-v-53635720=""
         >
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
-            style=""
+            class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot"
+              class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
+              style=""
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
+                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>
       <div
         class="wrapper"
@@ -781,171 +1020,201 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-slider"
+        class="wrapper"
+        data-v-a6c0268e=""
       >
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--capsule"
+          class="t-slider"
+          data-v-a6c0268e=""
         >
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--capsule t-slider__line--single"
-            style=""
+            class="t-slider__bar t-slider__bar--capsule"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot"
+              class="t-slider__line t-slider__line--capsule t-slider__line--single"
+              style=""
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
+                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>
       <div
-        class="t-slider t-slider--range"
+        class="wrapper"
+        data-v-a6c0268e=""
       >
-        <!--v-if-->
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--capsule"
+          class="t-slider t-slider--range"
+          data-v-a6c0268e=""
         >
+          <!--v-if-->
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--capsule"
-            style="left: 0px; right: 0px;"
+            class="t-slider__bar t-slider__bar--capsule"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot t-slider__dot--left"
+              class="t-slider__line t-slider__line--capsule"
+              style="left: 0px; right: 0px;"
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
-            </div>
-            <div
-              class="t-slider__dot t-slider__dot--right"
-            >
-              <!--v-if-->
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
               <div
-                class="t-slider__dot-slider"
-              />
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
             </div>
           </div>
+          <!--v-if-->
+          
         </div>
-        <!--v-if-->
-        
       </div>
       <div
-        class="t-slider t-slider--top t-slider--range"
+        class="wrapper"
+        data-v-a6c0268e=""
       >
-        <!--v-if-->
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--capsule"
+          class="t-slider t-slider--top t-slider--range"
+          data-v-a6c0268e=""
         >
+          <!--v-if-->
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--capsule"
-            style="left: 0px; right: 0px;"
+            class="t-slider__bar t-slider__bar--capsule"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot t-slider__dot--left"
+              class="t-slider__line t-slider__line--capsule"
+              style="left: 0px; right: 0px;"
             >
               <div
-                class="t-slider__dot-value"
+                class="t-slider__dot t-slider__dot--left"
               >
-                0
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
               </div>
               <div
-                class="t-slider__dot-slider"
-              />
-            </div>
-            <div
-              class="t-slider__dot t-slider__dot--right"
-            >
-              <div
-                class="t-slider__dot-value"
+                class="t-slider__dot t-slider__dot--right"
               >
-                0
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
               </div>
-              <div
-                class="t-slider__dot-slider"
-              />
             </div>
           </div>
+          <!--v-if-->
+          
         </div>
-        <!--v-if-->
-        
       </div>
       <div
-        class="t-slider"
+        class="wrapper"
+        data-v-a6c0268e=""
       >
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--capsule"
+          class="t-slider"
+          data-v-a6c0268e=""
         >
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--capsule t-slider__line--single"
-            style=""
+            class="t-slider__bar t-slider__bar--capsule"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot"
+              class="t-slider__line t-slider__line--capsule t-slider__line--single"
+              style=""
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
+                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>
       <div
-        class="t-slider t-slider--range"
+        class="wrapper"
+        data-v-a6c0268e=""
       >
-        <!--v-if-->
-        
-        <!--v-if-->
         <div
-          class="t-slider__bar t-slider__bar--capsule"
+          class="t-slider t-slider--range"
+          data-v-a6c0268e=""
         >
+          <!--v-if-->
+          
           <!--v-if-->
           <div
-            class="t-slider__line t-slider__line--capsule"
-            style="left: 0px; right: 0px;"
+            class="t-slider__bar t-slider__bar--capsule"
           >
+            <!--v-if-->
             <div
-              class="t-slider__dot t-slider__dot--left"
+              class="t-slider__line t-slider__line--capsule"
+              style="left: 0px; right: 0px;"
             >
-              <!--v-if-->
               <div
-                class="t-slider__dot-slider"
-              />
-            </div>
-            <div
-              class="t-slider__dot t-slider__dot--right"
-            >
-              <!--v-if-->
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
               <div
-                class="t-slider__dot-slider"
-              />
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
             </div>
           </div>
+          <!--v-if-->
+          
         </div>
-        <!--v-if-->
-        
       </div>
       
       
@@ -956,68 +1225,127 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
 
 exports[`Slider > Slider rangeVue demo works fine 1`] = `
 <div
-  class="t-slider t-slider--range"
+  class="wrapper"
+  data-v-58e1d8c9=""
 >
-  <!--v-if-->
-  
-  <!--v-if-->
   <div
-    class="t-slider__bar t-slider__bar--default"
+    class="t-slider t-slider--range"
+    data-v-58e1d8c9=""
   >
+    <!--v-if-->
+    
     <!--v-if-->
     <div
-      class="t-slider__line t-slider__line--default"
-      style="left: 0px; right: 0px;"
+      class="t-slider__bar t-slider__bar--default"
     >
+      <!--v-if-->
       <div
-        class="t-slider__dot t-slider__dot--left"
+        class="t-slider__line t-slider__line--default"
+        style="left: 0px; right: 0px;"
       >
-        <!--v-if-->
         <div
-          class="t-slider__dot-slider"
-        />
-      </div>
-      <div
-        class="t-slider__dot t-slider__dot--right"
-      >
-        <!--v-if-->
+          class="t-slider__dot t-slider__dot--left"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
         <div
-          class="t-slider__dot-slider"
-        />
+          class="t-slider__dot t-slider__dot--right"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
       </div>
     </div>
+    <!--v-if-->
+    
   </div>
-  <!--v-if-->
-  
 </div>
 `;
 
 exports[`Slider > Slider stepVue demo works fine 1`] = `
 <div
-  class="t-slider"
+  data-v-app=""
 >
   
-  <!--v-if-->
   <div
-    class="t-slider__bar t-slider__bar--default"
+    class="wrapper"
+    data-v-0f126170=""
+  >
+    <div
+      class="t-slider"
+      data-v-0f126170=""
+    >
+      
+      <!--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__dot"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      
+      <!--v-if-->
+    </div>
+  </div>
+  <div
+    class="wrapper"
+    data-v-0f126170=""
   >
-    <!--v-if-->
     <div
-      class="t-slider__line t-slider__line--default t-slider__line--single"
-      style=""
+      class="t-slider t-slider--range"
+      data-v-0f126170=""
     >
+      <!--v-if-->
+      
+      <!--v-if-->
       <div
-        class="t-slider__dot"
+        class="t-slider__bar t-slider__bar--default"
       >
         <!--v-if-->
         <div
-          class="t-slider__dot-slider"
-        />
+          class="t-slider__line t-slider__line--default"
+          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>
-  <!--v-if-->
   
-  <!--v-if-->
 </div>
 `;
diff --git a/src/slider/demos/base.vue b/src/slider/demos/base.vue
index 47b03fe71..4aea81fe2 100644
--- a/src/slider/demos/base.vue
+++ b/src/slider/demos/base.vue
@@ -1,3 +1,12 @@
 <template>
-  <t-slider :default-value="23" />
+  <div class="wrapper">
+    <t-slider :default-value="23" />
+  </div>
 </template>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/capsule.vue b/src/slider/demos/capsule.vue
index 7ab7cc723..3ba1e655b 100644
--- a/src/slider/demos/capsule.vue
+++ b/src/slider/demos/capsule.vue
@@ -1,13 +1,23 @@
 <template>
-  <t-slider :default-value="30" theme="capsule" />
+  <div class="wrapper">
+    <t-slider :default-value="30" theme="capsule" />
+  </div>
 
-  <t-slider :default-value="[40, 60]" range theme="capsule" />
+  <div class="wrapper">
+    <t-slider :default-value="[40, 60]" range theme="capsule" />
+  </div>
 
-  <t-slider :default-value="[40, 60]" range label="${value}" theme="capsule" />
+  <div class="wrapper">
+    <t-slider :default-value="[40, 60]" range label="${value}" theme="capsule" />
+  </div>
 
-  <t-slider :default-value="60" :marks="marks" :step="20" theme="capsule" />
+  <div class="wrapper">
+    <t-slider :default-value="60" :marks="marks" :step="20" theme="capsule" />
+  </div>
 
-  <t-slider :default-value="[20, 80]" range :marks="marks" :step="20" theme="capsule" />
+  <div class="wrapper">
+    <t-slider :default-value="[20, 80]" range :marks="marks" :step="20" theme="capsule" />
+  </div>
 </template>
 <script lang="ts" setup>
 const marks = {
@@ -19,3 +29,11 @@ const marks = {
   100: '100',
 };
 </script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 16px 0;
+}
+</style>
diff --git a/src/slider/demos/disabled.vue b/src/slider/demos/disabled.vue
index cc7afb241..6d25ef9a8 100644
--- a/src/slider/demos/disabled.vue
+++ b/src/slider/demos/disabled.vue
@@ -1,5 +1,7 @@
 <template>
-  <t-slider :value="35" disabled />
+  <div class="wrapper">
+    <t-slider :value="35" disabled />
+  </div>
 
   <div class="wrapper">
     <t-slider show-extreme-value label="${value}" :value="[40, 60]" range disabled />
@@ -21,8 +23,8 @@ const marks = {
 </script>
 <style lang="less" scoped>
 .wrapper {
-  margin-top: 16px;
   background: #fff;
-  padding-top: 20px;
+  margin-top: 16px;
+  padding: 18px 0;
 }
 </style>
diff --git a/src/slider/demos/label.vue b/src/slider/demos/label.vue
index c546c6148..00b2f40a2 100644
--- a/src/slider/demos/label.vue
+++ b/src/slider/demos/label.vue
@@ -1,5 +1,10 @@
 <template>
-  <t-slider :value="value" :label="true" :on-change="onChange" />
+  <div class="wrapper">
+    <t-slider :value="value" :label="true" :on-change="onChange" />
+  </div>
+  <div class="wrapper">
+    <t-slider range :default-value="[20, 60]" :label="true" show-extreme-value />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -10,3 +15,11 @@ const onChange = (e: any) => {
   value.value = e.value;
 };
 </script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/mobile.vue b/src/slider/demos/mobile.vue
index 9b0fe09ee..214c42396 100644
--- a/src/slider/demos/mobile.vue
+++ b/src/slider/demos/mobile.vue
@@ -8,10 +8,10 @@
     <tdesign-demo-block summary="双游标滑块">
       <rangeDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带数值滑动选择器">
+    <tdesign-demo-block summary="带数值单游标/双游标滑块">
       <labelDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带刻度滑动选择器">
+    <tdesign-demo-block summary="带刻度单游标/双游标滑块">
       <stepDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="02 组件状态" summary="滑块禁用状态">
@@ -34,6 +34,6 @@ import capsuleDemo from './capsule.vue';
 
 <style scoped>
 .tdesign-mobile-demo {
-  background: #fff;
+  background: #f6f6f6;
 }
 </style>
diff --git a/src/slider/demos/range.vue b/src/slider/demos/range.vue
index db3a2dfdd..0b295a880 100644
--- a/src/slider/demos/range.vue
+++ b/src/slider/demos/range.vue
@@ -1,5 +1,7 @@
 <template>
-  <t-slider :default-value="rangeValue" range @change="onChange" />
+  <div class="wrapper">
+    <t-slider :default-value="rangeValue" range @change="onChange" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -11,3 +13,10 @@ function onChange($event: number | number[]) {
   console.log(`change to ${$event}`);
 }
 </script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/step.vue b/src/slider/demos/step.vue
index 2530f65a3..1e4de24f8 100644
--- a/src/slider/demos/step.vue
+++ b/src/slider/demos/step.vue
@@ -1,5 +1,11 @@
 <template>
-  <t-slider v-model="value" :marks="marks" :step="20" />
+  <div class="wrapper">
+    <t-slider v-model="value" :marks="marks" :step="20" />
+  </div>
+
+  <div class="wrapper">
+    <t-slider range :default-value="[20, 60]" :marks="marks" :step="20" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -15,3 +21,11 @@ const marks = ref({
   100: '100',
 });
 </script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/slider.vue b/src/slider/slider.vue
index 99df452fc..449f1f17c 100644
--- a/src/slider/slider.vue
+++ b/src/slider/slider.vue
@@ -4,7 +4,7 @@
       <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--min`]">{{
         label ? getValue(label, min) : min
       }}</text>
-      <div ref="sliderLine" :class="sliderLineClasses">
+      <div ref="sliderLine" :class="sliderLineClasses" @click="onClick">
         <template v-if="state.isScale">
           <div
             v-for="(item, index) in state.scaleArray"
@@ -55,7 +55,7 @@
     </template>
     <template v-if="range">
       <text v-if="showExtremeValue" :class="[`${name}__range-extreme`, `${name}__range-extreme--min`]">{{ min }}</text>
-      <div ref="sliderLine" :class="sliderLineClasses">
+      <div ref="sliderLine" :class="sliderLineClasses" @click="onLineClick">
         <template v-if="state.isScale">
           <div
             v-for="(item, index) in state.scaleArray"
@@ -113,11 +113,11 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance, provide, watch, onMounted } from 'vue';
+import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance, watch, onMounted } from 'vue';
 import config from '../config';
 import props from './props';
 import { useVModel } from '../shared/useVModel';
-import { renderTNode, TNode, useEmitEvent } from '../shared';
+import { renderTNode, useEmitEvent } from '../shared';
 import { trimSingleValue, trimValue } from './tool';
 import type { SliderValue } from './type';
 import { useFormDisabled } from '../form/hooks';
@@ -126,12 +126,8 @@ const { prefix } = config;
 const name = `${prefix}-slider`;
 
 type dataType = {
-  sliderStyles: string;
-  classPrefix: string;
   initialLeft: number;
   initialRight: number;
-  activeLeft: number;
-  activeRight: number;
   maxRange: number;
   lineLeft: number;
   lineRight: number;
@@ -140,9 +136,6 @@ type dataType = {
   isScale: boolean;
   scaleArray: any[];
   scaleTextArray: any[];
-  _value: SliderValue;
-  prefix: string;
-  isVisibleToScreenReader: boolean;
 };
 
 export interface TouchData {
@@ -156,30 +149,23 @@ export interface TouchData {
 export default defineComponent({
   name,
   props,
-  emits: ['change'],
+  emits: ['change', 'update:value', 'update:modelValue'],
   setup(props, context) {
     const disabled = useFormDisabled();
     const sliderLine = ref<HTMLElement>();
-    const rootRef = ref<HTMLElement>();
+    const leftDot = ref<HTMLElement>();
+    const rightDot = 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);
 
@@ -297,6 +283,10 @@ export default defineComponent({
       const [touch] = e.changedTouches;
       const { pageX } = touch;
       const currentLeft = pageX - state.initialLeft;
+      return getChangeValue(currentLeft);
+    };
+
+    const getChangeValue = (currentLeft: number) => {
       let value = 0;
       if (currentLeft <= 0) {
         value = Number(min.value);
@@ -392,11 +382,51 @@ export default defineComponent({
       triggerValue(newData);
     };
 
+    const onClick = (e: MouseEvent) => {
+      e.stopPropagation();
+      if (disabled.value) return;
+      if (!sliderLine.value) return;
+      const currentLeft = e.clientX - state.initialLeft;
+      const value = getChangeValue(currentLeft);
+      setInnerValue(value);
+      triggerValue(value);
+    };
+
+    const onLineClick = (e: MouseEvent) => {
+      e.stopPropagation();
+      if (disabled.value) return;
+      const halfBlock = theme.value === 'capsule' ? Number(state.blockSize) / 2 : 0;
+      const currentLeft = e.clientX - state.initialLeft;
+      if (currentLeft < 0 || currentLeft > state.maxRange + Number(state.blockSize)) return;
+
+      const leftDotValue = leftDot.value?.getBoundingClientRect() as DOMRect;
+      const rightDotValue = rightDot.value?.getBoundingClientRect() as DOMRect;
+      // 点击处-halfblock 与 leftDot左侧的距离（绝对值）
+      const distanceLeft = Math.abs(e.clientX - leftDotValue.left - halfBlock);
+      // 点击处-halfblock 与 rightDot左侧的距离（绝对值）
+      const distanceRight = Math.abs(rightDotValue.left - e.clientX + halfBlock);
+      // 哪个绝对值小就移动哪个Dot
+      const isMoveLeft = distanceLeft < distanceRight;
+
+      if (isMoveLeft) {
+        // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
+        const left = e.clientX - state.initialLeft;
+        const leftValue = convertPosToValue(left, 0);
+        setInnerValue([stepValue(leftValue), innerValue.value?.[1]]);
+        triggerValue([stepValue(leftValue), innerValue.value?.[1]]);
+      } else {
+        const right = -(e.clientX - state.initialRight);
+        const rightValue = convertPosToValue(right, 1);
+        setInnerValue([innerValue.value?.[0], stepValue(rightValue)]);
+        triggerValue([stepValue(rightValue), innerValue.value?.[1]]);
+      }
+    };
     return {
       state,
       name: ref(name),
-      rootRef,
       sliderLine,
+      leftDot,
+      rightDot,
       lineBarWidth,
       value: innerValue,
       labelContent,
@@ -408,6 +438,8 @@ export default defineComponent({
       onTouchMoveLeft,
       onTouchMoveRight,
       getValue,
+      onClick,
+      onLineClick,
     };
   },
 });