diff --git a/example/app.json b/example/app.json
index be640f33..f90a52c6 100644
--- a/example/app.json
+++ b/example/app.json
@@ -119,6 +119,7 @@
"van-sidebar": "./dist/sidebar/index",
"van-sidebar-item": "./dist/sidebar-item/index",
"van-slider": "./dist/slider/index",
+ "van-slider-demo": "./dist/slider/demo/index",
"van-stepper": "./dist/stepper/index",
"van-stepper-demo": "./dist/stepper/demo/index",
"van-steps": "./dist/steps/index",
diff --git a/example/pages/slider/index.js b/example/pages/slider/index.js
index 673c7a08..cc11dfda 100644
--- a/example/pages/slider/index.js
+++ b/example/pages/slider/index.js
@@ -1,20 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- currentValue: 50,
- },
-
- onChange(event) {
- wx.showToast({
- icon: 'none',
- title: `当前值：${event.detail}`,
- });
- },
-
- onDrag(event) {
- this.setData({
- currentValue: event.detail.value,
- });
- },
-});
+Page();
diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml
index 0a35ef8d..7e03ef7f 100644
--- a/example/pages/slider/index.wxml
+++ b/example/pages/slider/index.wxml
@@ -1,83 +1 @@
-<demo-block title="基础用法">
- <van-slider
- value="50"
- custom-class="slider"
- bind:change="onChange"
- />
-</demo-block>
-
-<demo-block title="双滑块">
- <van-slider
- range
- value="{{ [20, 60 ] }}"
- custom-class="slider"
- bind:change="onChange"
- />
-</demo-block>
-
-<demo-block title="指定选择范围">
- <van-slider
- custom-class="slider"
- min="-50"
- max="50"
- bind:change="onChange"
- />
-</demo-block>
-
-<demo-block title="禁用">
- <van-slider
- custom-class="slider"
- value="50"
- disabled
- />
-</demo-block>
-
-<demo-block title="指定步长">
- <van-slider
- custom-class="slider"
- value="50"
- step="10"
- bind:change="onChange"
- />
-</demo-block>
-
-<demo-block title="自定义样式">
- <van-slider
- value="50"
- custom-class="slider"
- bar-height="4px"
- active-color="#ee0a24"
- />
-</demo-block>
-
-<demo-block title="自定义按钮">
- <van-slider
- value="{{ currentValue }}"
- custom-class="slider"
- use-button-slot
- active-color="#ee0a24"
- bind:drag="onDrag"
- >
- <view class="custom-button" slot="button">
- {{ currentValue }}
- </view>
- </van-slider>
-</demo-block>
-
-<demo-block title="垂直方向">
- <view style="height: 150px; padding-left: 30px;">
- <van-slider
- value="{{ 50 }}"
- vertical
- custom-class="slider"
- bind:change="onChange"
- />
- <van-slider
- value="{{ [20, 60 ] }}"
- vertical
- range
- custom-class="slider"
- bind:change="onChange"
- />
- </view>
-</demo-block>
+<van-slider-demo />
diff --git a/packages/slider/demo/index.json b/packages/slider/demo/index.json
new file mode 100644
index 00000000..bdfd18ec
--- /dev/null
+++ b/packages/slider/demo/index.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-slider": "../../slider/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/slider/index.wxss b/packages/slider/demo/index.less
similarity index 100%
rename from example/pages/slider/index.wxss
rename to packages/slider/demo/index.less
diff --git a/packages/slider/demo/index.ts b/packages/slider/demo/index.ts
new file mode 100644
index 00000000..3f8673d1
--- /dev/null
+++ b/packages/slider/demo/index.ts
@@ -0,0 +1,22 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ currentValue: 50,
+ },
+
+ methods: {
+ onChange(event) {
+ wx.showToast({
+ icon: 'none',
+ title: `当前值：${event.detail}`,
+ });
+ },
+
+ onDrag(event) {
+ this.setData({
+ currentValue: event.detail.value,
+ });
+ },
+ },
+});
diff --git a/packages/slider/demo/index.wxml b/packages/slider/demo/index.wxml
new file mode 100644
index 00000000..0a35ef8d
--- /dev/null
+++ b/packages/slider/demo/index.wxml
@@ -0,0 +1,83 @@
+<demo-block title="基础用法">
+ <van-slider
+ value="50"
+ custom-class="slider"
+ bind:change="onChange"
+ />
+</demo-block>
+
+<demo-block title="双滑块">
+ <van-slider
+ range
+ value="{{ [20, 60 ] }}"
+ custom-class="slider"
+ bind:change="onChange"
+ />
+</demo-block>
+
+<demo-block title="指定选择范围">
+ <van-slider
+ custom-class="slider"
+ min="-50"
+ max="50"
+ bind:change="onChange"
+ />
+</demo-block>
+
+<demo-block title="禁用">
+ <van-slider
+ custom-class="slider"
+ value="50"
+ disabled
+ />
+</demo-block>
+
+<demo-block title="指定步长">
+ <van-slider
+ custom-class="slider"
+ value="50"
+ step="10"
+ bind:change="onChange"
+ />
+</demo-block>
+
+<demo-block title="自定义样式">
+ <van-slider
+ value="50"
+ custom-class="slider"
+ bar-height="4px"
+ active-color="#ee0a24"
+ />
+</demo-block>
+
+<demo-block title="自定义按钮">
+ <van-slider
+ value="{{ currentValue }}"
+ custom-class="slider"
+ use-button-slot
+ active-color="#ee0a24"
+ bind:drag="onDrag"
+ >
+ <view class="custom-button" slot="button">
+ {{ currentValue }}
+ </view>
+ </van-slider>
+</demo-block>
+
+<demo-block title="垂直方向">
+ <view style="height: 150px; padding-left: 30px;">
+ <van-slider
+ value="{{ 50 }}"
+ vertical
+ custom-class="slider"
+ bind:change="onChange"
+ />
+ <van-slider
+ value="{{ [20, 60 ] }}"
+ vertical
+ range
+ custom-class="slider"
+ bind:change="onChange"
+ />
+ </view>
+</demo-block>
diff --git a/packages/slider/test/__snapshots__/demo.spec.ts.snap b/packages/slider/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..47bbc3c0
--- /dev/null
+++ b/packages/slider/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,442 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 基础用法
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ bind:change="onChange"
+ >
+ <wx-view
+ class="custom-class van-slider"
+ style="
+ background: ;
+ height: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 50%;
+ left: 0%;
+ top: 0;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 双滑块
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ bind:change="onChange"
+ >
+ <wx-view
+ class="custom-class van-slider"
+ style="
+ background: ;
+ height: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 40%;
+ left: 20%;
+ top: 0;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper-left"
+ data-index="{{0}}"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ <wx-view
+ class="van-slider__button-wrapper-right"
+ data-index="{{1}}"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 指定选择范围
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ bind:change="onChange"
+ >
+ <wx-view
+ class="custom-class van-slider"
+ style="
+ background: ;
+ height: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 50%;
+ left: 0%;
+ top: 0;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 禁用
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ >
+ <wx-view
+ class="custom-class van-slider van-slider--disabled"
+ style="
+ background: ;
+ height: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 50%;
+ left: 0%;
+ top: 0;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 指定步长
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ bind:change="onChange"
+ >
+ <wx-view
+ class="custom-class van-slider"
+ style="
+ background: ;
+ height: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 50%;
+ left: 0%;
+ top: 0;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 自定义样式
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ >
+ <wx-view
+ class="custom-class van-slider"
+ style="
+ background: ;
+ height: 4px;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 50%;
+ left: 0%;
+ top: 0;
+
+ ; background-color:#ee0a24"
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 自定义按钮
+ </wx-view>
+ <van-slider
+ customClass="slider"
+ bind:drag="onDrag"
+ >
+ <wx-view
+ class="custom-class van-slider"
+ style="
+ background: ;
+ height: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ width: 50%;
+ left: 0%;
+ top: 0;
+
+ ; background-color:#ee0a24"
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="custom-button"
+ slot="button"
+ >
+
+ 50
+
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 垂直方向
+ </wx-view>
+ <wx-view
+ style="height: 150px; padding-left: 30px;"
+ >
+ <van-slider
+ customClass="slider"
+ bind:change="onChange"
+ >
+ <wx-view
+ class="custom-class van-slider van-slider--vertical"
+ style="
+ background: ;
+ width: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ height: 50%;
+ left: 0;
+ top: 0%;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ <van-slider
+ customClass="slider"
+ bind:change="onChange"
+ >
+ <wx-view
+ class="custom-class van-slider van-slider--vertical"
+ style="
+ background: ;
+ width: ;
+ "
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-slider__bar"
+ style="
+ height: 40%;
+ left: 0;
+ top: 20%;
+
+ ; "
+ >
+ <wx-view
+ class="van-slider__button-wrapper-left"
+ data-index="{{0}}"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ <wx-view
+ class="van-slider__button-wrapper-right"
+ data-index="{{1}}"
+ bind:touchcancel="onTouchEnd"
+ bind:touchend="onTouchEnd"
+ catch:touchmove="onTouchMove"
+ bind:touchstart="onTouchStart"
+ >
+ <wx-view
+ class="van-slider__button"
+ />
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-slider>
+ </wx-view>
+ </wx-view>
+ </demo-block>
+</main>
+`;
diff --git a/packages/slider/test/demo.spec.ts b/packages/slider/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/slider/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});