[new component] add Slider component #721

docs/markdown/en-US/slider.md

@@ -0,0 +1,109 @@
+## Slider
+
+### Install
+``` javascript
+import { Slider } from 'vant';
+
+Vue.use(Slider);
+```
+
+### Usage
+#### Basic Usage
+
+```html
+<van-slider v-model="value1"/>
+<van-row>
+  <van-col span="12">
+    <van-stepper v-model="value1" />
+  </van-col>
+</van-row>
+```
+
+```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)
+  },
+  handleAfterChange(value) {
+    console.log('handleAfterChange:', value)
+  }
+}
+```
+
+### Customized style
+
+```html
+<van-slider
+  v-model="value5"
+  pivot-color="#333"
+  loaded-bar-color="red"
+  bar-color="blue"
+/>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| 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 | - |
+
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| change | touchmove emit | value |
+| after-change | touchend emit | value |

docs/markdown/index.js

@@ -56,6 +56,7 @@ export default {
   'zh-CN/radio': wrapper(r => require.ensure([], () => r(require('./zh-CN/radio.md')), 'zh-CN/radio')),
   'zh-CN/search': wrapper(r => require.ensure([], () => r(require('./zh-CN/search.md')), 'zh-CN/search')),
   'zh-CN/sku': wrapper(r => require.ensure([], () => r(require('./zh-CN/sku.md')), 'zh-CN/sku')),
+  'zh-CN/slider': wrapper(r => require.ensure([], () => r(require('./zh-CN/slider.md')), 'zh-CN/slider')),
   'zh-CN/stepper': wrapper(r => require.ensure([], () => r(require('./zh-CN/stepper.md')), 'zh-CN/stepper')),
   'zh-CN/steps': wrapper(r => require.ensure([], () => r(require('./zh-CN/steps.md')), 'zh-CN/steps')),
   'zh-CN/submit-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/submit-bar.md')), 'zh-CN/submit-bar')),
@@ -112,6 +113,7 @@ export default {
   'en-US/radio': wrapper(r => require.ensure([], () => r(require('./en-US/radio.md')), 'en-US/radio')),
   'en-US/search': wrapper(r => require.ensure([], () => r(require('./en-US/search.md')), 'en-US/search')),
   'en-US/sku': wrapper(r => require.ensure([], () => r(require('./en-US/sku.md')), 'en-US/sku')),
+  'en-US/slider': wrapper(r => require.ensure([], () => r(require('./en-US/slider.md')), 'en-US/slider')),
   'en-US/stepper': wrapper(r => require.ensure([], () => r(require('./en-US/stepper.md')), 'en-US/stepper')),
   'en-US/steps': wrapper(r => require.ensure([], () => r(require('./en-US/steps.md')), 'en-US/steps')),
   'en-US/submit-bar': wrapper(r => require.ensure([], () => r(require('./en-US/submit-bar.md')), 'en-US/submit-bar')),

docs/markdown/zh-CN/slider.md

@@ -0,0 +1,108 @@
+## Slider 滑块
+
+### 使用指南
+``` javascript
+import { Slider } from 'vant';
+
+Vue.use(Slider);
+```
+
+#### 基本用法
+
+```html
+<van-slider v-model="value1"/>
+<van-row>
+  <van-col span="12">
+    <van-stepper v-model="value1" />
+  </van-col>
+</van-row>
+```
+
+```js
+data() {
+  return {
+    value1: 50
+  }
+}
+```
+
+#### 最大最小值
+
+```html
+<van-slider 
+  v-model="value2"
+  :min="min"
+  :max="max"
+/>
+```
+```js
+data() {
+  return {
+    value2: 50,
+    min: 10,
+    max: 90
+  }
+}
+```
+
+#### 禁用
+
+```html
+<van-slider v-model="value3" 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"
+/>
+```
+
+### 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 | - |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| change | 拖动时触发 | value |
+| after-change | 拖动停止后触发 | value |