feat(Slider): add button-size prop

src/slider/README.md

@@ -103,6 +103,7 @@ export default {
 | min | Min value | *number* | `0` |
 | step | Step size | *number* | `1` |
 | bar-height | Height of bar | *string \| number* | `2px` |
+| button-size `v2.4.5` | Button size | *string \| number* | `24px` |
 | active-color | Active color of bar | *string* | `#1989fa` |
 | inactive-color | Inactive color of bar | *string* | `#e5e5e5` |
 | disabled | Whether to disable slider | *boolean* | `false` |

src/slider/README.zh-CN.md

@@ -105,8 +105,9 @@ Slider 垂直展示时，高度为 100% 父元素高度
 | min | 最小值 | *number* | `0` |
 | step | 步长 | *number* | `1` |
 | bar-height | 进度条高度，默认单位为`px` | *string \| number* | `2px` |
+| button-size `v2.4.5` | 滑块按钮大小，默认单位为`px` | *string \| number* | `24px` |
 | active-color | 进度条激活态颜色 | *string* | `#1989fa` |
-| inactive-color | 进度条默认颜色 | *string* | `#e5e5e5` |
+| inactive-color | 进度条非激活态颜色 | *string* | `#e5e5e5` |
 | disabled | 是否禁用滑块 | *boolean* | `false` |
 | vertical | 是否垂直展示 | *boolean* | `false` |
 

src/slider/index.js

@@ -10,6 +10,7 @@ export default createComponent({
   props: {
     disabled: Boolean,
     vertical: Boolean,
+    buttonSize: [Number, String],
     activeColor: String,
     inactiveColor: String,
     min: {
@@ -44,6 +45,17 @@ export default createComponent({
     range() {
       return this.max - this.min;
     },
+
+    buttonStyle() {
+      if (this.buttonSize) {
+        const size = addUnit(this.buttonSize);
+
+        return {
+          width: size,
+          height: size,
+        };
+      }
+    },
   },
 
   created() {
@@ -173,7 +185,9 @@ export default createComponent({
             aria-orientation={this.vertical ? 'vertical' : 'horizontal'}
             class={bem('button-wrapper')}
           >
-            {this.slots('button') || <div class={bem('button')} />}
+            {this.slots('button') || (
+              <div class={bem('button')} style={this.buttonStyle} />
+            )}
           </div>
         </div>
       </div>

src/slider/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`bar height 1`] = `
+exports[`bar-height prop 1`] = `
 <div class="van-slider">
   <div class="van-slider__bar" style="width: 50%; height: 10px;">
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
@@ -10,6 +10,16 @@ exports[`bar height 1`] = `
 </div>
 `;
 
+exports[`button-size prop 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 50%; height: 2px;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button" style="width: 10px; height: 10px;"></div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`click bar 1`] = `
 <div class="van-slider van-slider--disabled">
   <div class="van-slider__bar" style="width: 50%; height: 2px;">

src/slider/test/index.spec.js

@@ -111,7 +111,7 @@ it('click vertical', () => {
   restoreMock();
 });
 
-it('bar height', () => {
+it('bar-height prop', () => {
   const wrapper = mount(Slider, {
     propsData: {
       value: 50,
@@ -122,6 +122,17 @@ it('bar height', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it('button-size prop', () => {
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      buttonSize: 10,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 it('should not emit change event when value not changed', () => {
   const wrapper = mount(Slider, {
     propsData: {