docs(Slider): update demo

src/slider/README.md

@@ -109,18 +109,15 @@ export default {
 ### Vertical
 
 ```html
-<div :style="{ height: '100px' }">
+<div :style="{ height: '150px' }">
-  <van-slider v-model="value" vertical />
+  <van-slider v-model="value" vertical @change="onChange" />
-</div>
+  <van-slider
-```
+    v-model="value2"
-
+    range
-### Vertical, Dual thumb mode
+    vertical
-
+    style="margin-left: 100px;"
-Add `range` and `vertical` attributes at the same time, and make sure that the value of `value` is an array
+    @change="onChange"
-
+  />
-```html
-<div :style="{ height: '120px' }">
-  <van-slider v-model="value" range vertical @change="onChange" />
 </div>
 ```
 
@@ -130,8 +127,8 @@ import { Toast } from 'vant';
 export default {
   data() {
     return {
-      // value must be an array
+      value: 50,
-      value: [10, 50],
+      value2: [10, 50],
     };
   },
   methods: {
@@ -151,12 +148,12 @@ export default {
 | value | Current value | _number \| array_ | `0` |
 | max | Max value | _number \| string_ | `100` |
 | min | Min value | _number \| string_ | `0` |
-| range | Dual thumb mode | _boolean_ | `false` |
 | step | Step size | _number \| string_ | `1` |
 | bar-height | Height of bar | _number \| string_ | `2px` |
 | button-size `v2.4.5` | Button size | _number \| string_ | `24px` |
 | active-color | Active color of bar | _string_ | `#1989fa` |
 | inactive-color | Inactive color of bar | _string_ | `#e5e5e5` |
+| range `v2.10.7` | Whether to enable dual thumb mode | _boolean_ | `false` |
 | disabled | Whether to disable slider | _boolean_ | `false` |
 | vertical | Whether to display slider vertically | _boolean_ | `false` |
 

src/slider/README.zh-CN.md

@@ -108,21 +108,18 @@ export default {
 
 ### 垂直方向
 
-Slider 垂直展示时，高度为 100% 父元素高度
+设置 `vertical` 属性后，滑块会垂直展示，且高度为 100% 父元素高度。
 
 ```html
-<div :style="{ height: '120px' }">
+<div :style="{ height: '150px' }">
-  <van-slider v-model="value" vertical />
+  <van-slider v-model="value" vertical @change="onChange" />
-</div>
+  <van-slider
-```
+    v-model="value2"
-
+    range
-### 垂直方向，双滑块
+    vertical
-
+    style="margin-left: 100px;"
-同时添加`range`和`vertical`属性，并确保`value`的值是一个数组
+    @change="onChange"
-
+  />
-```html
-<div :style="{ height: '120px' }">
-  <van-slider v-model="value" range vertical @change="onChange" />
 </div>
 ```
 
@@ -132,8 +129,8 @@ import { Toast } from 'vant';
 export default {
   data() {
     return {
-      // 双滑块模式时，值必须是数组
+      value: 50,
-      value: [10, 50],
+      value2: [10, 50],
     };
   },
   methods: {
@@ -153,12 +150,12 @@ export default {
 | value | 当前进度百分比 | _number \| array_ | `0` |
 | max | 最大值 | _number \| string_ | `100` |
 | min | 最小值 | _number \| string_ | `0` |
-| range | 双滑块模式 | _boolean_ | `false` |
 | step | 步长 | _number \| string_ | `1` |
 | bar-height | 进度条高度，默认单位为`px` | _number \| string_ | `2px` |
 | button-size `v2.4.5` | 滑块按钮大小，默认单位为`px` | _number \| string_ | `24px` |
 | active-color | 进度条激活态颜色 | _string_ | `#1989fa` |
 | inactive-color | 进度条非激活态颜色 | _string_ | `#e5e5e5` |
+| range `v2.10.7` | 是否开启双滑块模式 | _boolean_ | `false` |
 | disabled | 是否禁用滑块 | _boolean_ | `false` |
 | vertical | 是否垂直展示 | _boolean_ | `false` |
 

src/slider/demo/index.vue

@@ -38,14 +38,15 @@
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="t('vertical')">
-      <div :style="{ height: '120px', paddingLeft: '30px' }">
+      <div :style="{ height: '150px', paddingLeft: '30px' }">
         <van-slider v-model="value8" vertical @change="onChange" />
-      </div>
+        <van-slider
-    </demo-block>
+          v-model="value9"
-
+          range
-    <demo-block v-if="!isWeapp" :title="t('vertical2')">
+          vertical
-      <div :style="{ height: '120px', paddingLeft: '30px' }">
+          style="margin-left: 100px;"
-        <van-slider v-model="value9" range vertical @change="onChange" />
+          @change="onChange"
+        />
       </div>
     </demo-block>
   </demo-section>
@@ -64,7 +65,6 @@ export default {
       customButton: '自定义按钮',
       text: '当前值：',
       vertical: '垂直方向',
-      vertical2: '垂直方向，双滑块',
     },
     'en-US': {
       title1: 'Basic Usage',
@@ -76,7 +76,6 @@ export default {
       customButton: 'Custom Button',
       text: 'Current value: ',
       vertical: 'Vertical',
-      vertical2: 'Vertical, Dual thumb mode',
     },
   },
   data() {

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

@@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div style="height: 120px; padding-left: 30px;">
+    <div style="height: 150px; padding-left: 30px;">
       <div class="van-slider van-slider--vertical">
         <div class="van-slider__bar" style="height: 50%;">
           <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
@@ -77,11 +77,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-    </div>
+      <div class="van-slider van-slider--vertical" style="margin-left: 100px;">
-  </div>
-  <div>
-    <div style="height: 120px; padding-left: 30px;">
-      <div class="van-slider van-slider--vertical">
         <div class="van-slider__bar" style="height: 40%; top: 20%;">
           <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="20,60" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper-left">
             <div class="van-slider__button"></div>