feat(Slider): add left-button and right-button slots (#10053)

src/slider/README.md

@@ -168,9 +168,11 @@ export default {
 
 ### Slots
 
-| Name   | Description   |
+| Name         | Description                    | Arguments         |
-| ------ | ------------- |
+| ------------ | ------------------------------ | ----------------- |
-| button | Custom button |
+| button       | Custom button                  | -                 |
+| left-button  | Custom left button (in range)  | { value: number } |
+| right-button | Custom right button (in range) | { value: number } |
 
 ### Less Variables
 

src/slider/README.zh-CN.md

@@ -174,9 +174,11 @@ export default {
 
 ### Slots
 
-| 名称   | 说明           |
+| 名称         | 说明                               | 参数              |
-| ------ | -------------- |
+| ------------ | ---------------------------------- | ----------------- |
-| button | 自定义滑动按钮 |
+| button       | 自定义滑动按钮                     | -                 |
+| left-button  | 自定义左侧滑块按钮（双滑块模式下） | { value: number } |
+| right-button | 自定义右侧滑块按钮（双滑块模式下） | { value: number } |
 
 ### 样式变量
 

src/slider/demo/index.vue

@@ -44,7 +44,7 @@
           v-model="value9"
           range
           vertical
-          style="margin-left: 100px;"
+          style="margin-left: 100px"
           @change="onChange"
         />
       </div>

src/slider/index.js

@@ -236,6 +236,7 @@ export default createComponent({
     const renderButton = (i) => {
       const map = ['left', 'right'];
       const isNumber = typeof i === 'number';
+      const current = isNumber ? this.value[i] : this.value
       const getClassName = () => {
         if (isNumber) {
           return `button-wrapper-${map[i]}`;
@@ -248,6 +249,20 @@ export default createComponent({
         }
         return `wrapper`;
       };
+      const renderButtonContent = () => {
+        if (isNumber) {
+          const slot = this.slots(i === 0 ? 'left-button' : 'right-button', {value: current})
+          if (slot) {
+            return slot
+          }
+        }
+        if (this.slots('button')) {
+          return this.slots('button')
+        }
+        return (
+          <div class={bem('button')} style={this.buttonStyle} />
+        )
+      }
 
       return (
         <div
@@ -267,9 +282,7 @@ export default createComponent({
           }}
           onClick={(e) => e.stopPropagation()}
         >
-          {this.slots('button') || (
+          {renderButtonContent()}
-            <div class={bem('button')} style={this.buttonStyle} />
-          )}
         </div>
       );
     };