[Improvement] Slider: add step & bar-height prop (#915)

docs/demos/views/slider.vue

@@ -1,19 +1,15 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-slider v-model="value1"/>
-      <van-row>
-        <van-col span="24">
-          <van-stepper v-model="value1" />
-        </van-col>
-      </van-row>
+      <van-slider v-model="value1" @change="onChange" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
       <van-slider
         v-model="value2"
-        :min="min"
-        :max="max"
+        :min="10"
+        :max="90"
+        @change="onChange"
       />
     </demo-block>
 
@@ -24,17 +20,9 @@
     <demo-block :title="$t('title4')">
       <van-slider
         v-model="value4"
-        @change="handleChange"
-        @after-change="handleAfterChange"
-      />
-    </demo-block>
-
-    <demo-block :title="$t('title5')">
-      <van-slider
-        v-model="value5"
-        pivot-color="#333"
-        loaded-bar-color="red"
-        bar-color="blue"
+        :step="10"
+        bar-height="4px"
+        @change="onChange"
       />
     </demo-block>
   </demo-section>
@@ -45,46 +33,43 @@ export default {
   i18n: {
     'zh-CN': {
       title1: '基本用法',
-      title2: '最大最小值',
+      title2: '指定选择范围',
       title3: '禁用',
-      title4: '事件',
-      title5: '自定义样式'
+      title4: '指定步长',
+      text: '当前值：'
     },
     'en-US': {
       title1: 'Basic Usage',
-      title2: 'Max && Min',
-      title3: 'Disabed',
-      title4: 'Event',
-      title5: 'Customized style'
+      title2: 'Range',
+      title3: 'Disabled',
+      title4: 'Step size',
+      text: 'Current value: '
     }
   },
+
   data() {
     return {
       value1: 50,
       value2: 50,
       value3: 50,
-      value4: 50,
-      value5: 50,
-      min: 10,
-      max: 90
-    }
+      value4: 50
+    };
   },
+
   methods: {
-    handleChange(value) {
-      console.log('handleChange:', value)
-    },
-    handleAfterChange(value) {
-      console.log('handleAfterChange:', value)
+    onChange(value) {
+      this.$toast(this.$t('text') + value);
     }
   }
 };
 </script>
 
 <style lang="postcss">
-  .van-row {
-    padding-top: 20px;
-    .van-col {
-      text-align: center;
-    }
+.demo-slider {
+  user-select: none;
+
+  .van-slider {
+    margin: 0 15px 30px;
   }
+}
 </style>

docs/markdown/en-US/slider.md

@@ -11,99 +11,56 @@ Vue.use(Slider);
 #### Basic Usage
 
 ```html
-<van-slider v-model="value1"/>
-<van-row>
-  <van-col span="12">
-    <van-stepper v-model="value1" />
-  </van-col>
-</van-row>
+<van-slider v-model="value" @change="onChange" />
 ```
 
 ```js
-data() {
-  return {
-    value1: 50
-  }
-}
-```
-
-#### Max && Min
-
-```html
-<van-slider 
-  v-model="value2"
-  :min="min"
-  :max="max"
-/>
-```
-```js
-data() {
-  return {
-    value2: 50,
-    min: 10,
-    max: 90
-  }
-}
-```
-
-#### Disabed
-
-```html
-<van-slider v-model="value3" disabled />
-```
-
-#### Customized style
-
-```html
-<van-slider
-    v-model="value4"
-    @change="handleChange"
-    @after-change="handleAfterChange"
-  />
-```
-
-```js
-data() {
-  return {
-    value4: 50
-  }
-},
-methods: {
-  handleChange(value) {
-    console.log('handleChange:', value)
+export default {
+  data() {
+    return {
+      value: 50
+    };
   },
-  handleAfterChange(value) {
-    console.log('handleAfterChange:', value)
+
+  methods: {
+    onChange(value) {
+      this.$toast('Current value：' + value);
+    }
   }
-}
+};
 ```
 
-### Customized style
+#### Range
 
 ```html
-<van-slider
-  v-model="value5"
-  pivot-color="#333"
-  loaded-bar-color="red"
-  bar-color="blue"
-/>
+<van-slider v-model="value" :min="10" :max="90" />
+```
+
+#### Disabled
+
+```html
+<van-slider v-model="value" disabled />
+```
+
+#### Step size
+
+```html
+<van-slider v-model="value" :step="10" bar-height="4px" />
 ```
 
 ### API
 
-| Attribute | Description | Type | Default | Accepted Values |
+| Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|-------------|
-| value | current value | Number  | 0 |  - |
-| disabled | disabled | Boolean  | false |  - |
-| bar-color | bar-color | string | `#cacaca` | - |
-| loaded-bar-color | loaded-bar-color | string | `#4b0` | - |
-| pivot-color | pivot-color | string  | `#4b0` |  - |
-| max | max | Number | 100 | - |
-| min | min | Number | 0 | - |
+| value | Current value | `Number` | `0` |
+| disabled | Whether to disable slider | `Boolean` | `false` |
+| max | Max value | `Number` | `100` |
+| min | Min value | `Number` | `0` |
+| step | Step size | `Number` | `1` |
+| bar-height | Height of bar | `String` | `2px` |
 
 ### Event
 
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
-| change | touchmove emit | value |
-| after-change | touchend emit | value |
+| change | Triggered after value change | value: current rate |

docs/markdown/zh-CN/slider.md

@@ -10,99 +10,56 @@ Vue.use(Slider);
 #### 基本用法
 
 ```html
-<van-slider v-model="value1"/>
-<van-row>
-  <van-col span="12">
-    <van-stepper v-model="value1" />
-  </van-col>
-</van-row>
+<van-slider v-model="value" @change="onChange" />
 ```
 
 ```js
-data() {
-  return {
-    value1: 50
+export default {
+  data() {
+    return {
+      value: 50
+    };
+  },
+
+  methods: {
+    onChange(value) {
+      this.$toast('当前值：' + value);
+    }
   }
-}
+};
 ```
 
-#### 最大最小值
+#### 指定选择范围
 
 ```html
-<van-slider 
-  v-model="value2"
-  :min="min"
-  :max="max"
-/>
-```
-```js
-data() {
-  return {
-    value2: 50,
-    min: 10,
-    max: 90
-  }
-}
+<van-slider v-model="value" :min="10" :max="90" />
 ```
 
 #### 禁用
 
 ```html
-<van-slider v-model="value3" disabled />
+<van-slider v-model="value" disabled />
 ```
 
-#### 事件
+#### 指定步长
 
 ```html
-<van-slider
-    v-model="value4"
-    @change="handleChange"
-    @after-change="handleAfterChange"
-  />
-```
-
-```js
-data() {
-  return {
-    value4: 50
-  }
-},
-methods: {
-  handleChange(value) {
-    console.log('handleChange:', value)
-  },
-  handleAfterChange(value) {
-    console.log('handleAfterChange:', value)
-  }
-}
-```
-
-### 自定义样式
-
-```html
-<van-slider
-  v-model="value5"
-  pivot-color="#333"
-  loaded-bar-color="red"
-  bar-color="blue"
-/>
+<van-slider v-model="value" :step="10" bar-height="4px" />
 ```
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
-|-----------|-----------|-----------|-------------|-------------|
-| value | 当前进度百分比 | Number  | 0 |  否 |
-| disabled | 滑块是否禁用 | Boolean  | false |  否 |
-| bar-color | 进度条颜色 | string | `#cacaca` | 否 |
-| loaded-bar-color | 已加载条颜色 | string | `#4b0` | 否 |
-| pivot-color | 滑块颜色 | string  | `#4b0` |  否 |
-| max | 最大值 | Number | 100 | - |
-| min | 最小值 | Number | 0 | - |
+| 参数       | 说明      | 类型       | 默认值       |
+|-----------|-----------|-----------|-------------|
+| value | 当前进度百分比 | `Number` | `0` |
+| disabled | 是否禁用滑块 | `Boolean` | `false` |
+| max | 最大值 | `Number` | `100` |
+| min | 最小值 | `Number` | `0` |
+| step | 步长 | `Number` | `1` |
+| bar-height | 进度条高度 | `String` | `2px` |
 
 ### Event
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| change | 拖动时触发 | value |
-| after-change | 拖动停止后触发 | value |
+| change | 进度值改变后触发 | value: 当前进度 |

docs/src/doc.config.js

@@ -136,6 +136,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress - 进度条'
               },
+              {
+                path: '/slider',
+                title: 'Slider - 滑块'
+              },
               {
                 path: '/stepper',
                 title: 'Stepper - 步进器'
@@ -148,10 +152,6 @@ module.exports = {
                 path: '/swipe',
                 title: 'Swipe - 轮播'
               },
-              {
-                path: '/slider',
-                title: 'Slider - 滑块'
-              },
               {
                 path: '/tab',
                 title: 'Tab - 标签页'
@@ -434,6 +434,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress'
               },
+              {
+                path: '/slider',
+                title: 'Slider'
+              },
               {
                 path: '/stepper',
                 title: 'Stepper'
@@ -446,10 +450,6 @@ module.exports = {
                 path: '/swipe',
                 title: 'Swipe'
               },
-              {
-                path: '/slider',
-                title: 'Slider'
-              },
               {
                 path: '/tab',
                 title: 'Tab'