diff --git a/example/pages/slider/index.js b/example/pages/slider/index.js
index 6dcfce23..f4b849fd 100644
--- a/example/pages/slider/index.js
+++ b/example/pages/slider/index.js
@@ -2,7 +2,7 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    currentValue: 30
+    currentValue: 50
   },
 
   onChange(event) {
diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml
index 73547424..ce15fe08 100644
--- a/example/pages/slider/index.wxml
+++ b/example/pages/slider/index.wxml
@@ -29,20 +29,29 @@
     custom-class="slider"
     value="50"
     step="10"
-    bar-height="4px"
     bind:change="onChange"
   />
 </demo-block>
 
+<demo-block title="自定义样式">
+  <van-slider
+    value="50"
+    custom-class="slider"
+    bar-height="4px"
+    active-color="#f44"
+  />
+</demo-block>
+
 <demo-block title="自定义按钮">
   <van-slider
     value="{{ currentValue }}"
     custom-class="slider"
     use-button-slot
+    active-color="#f44"
     bind:drag="onDrag"
   >
     <view class="custom-button" slot="button">
-      {{ currentValue }}/100
+      {{ currentValue }}
     </view>
   </van-slider>
 </demo-block>
diff --git a/example/pages/slider/index.wxss b/example/pages/slider/index.wxss
index e7c58e47..6f57cba8 100644
--- a/example/pages/slider/index.wxss
+++ b/example/pages/slider/index.wxss
@@ -3,10 +3,10 @@
 }
 
 .custom-button {
-  width: 44px;
+  width: 26px;
   color: #fff;
   font-size: 10px;
-  line-height: 20px;
+  line-height: 18px;
   text-align: center;
   border-radius: 100px;
   background-color: #f44;
diff --git a/packages/slider/README.md b/packages/slider/README.md
index 7491123a..1bea8230 100644
--- a/packages/slider/README.md
+++ b/packages/slider/README.md
@@ -39,7 +39,45 @@ Page({
 #### 指定步长
 
 ```html
-<van-slider value="50" step="10" bar-height="4px" />
+<van-slider value="50" step="10" />
+```
+
+#### 自定义样式
+
+```html
+<van-slider
+  value="50"
+  bar-height="4px"
+  active-color="#f44"
+/>
+```
+
+#### 自定义按钮
+
+```html
+<van-slider
+  value="{{ currentValue }}"
+  use-button-slot
+  bind:drag="onDrag"
+>
+  <view class="custom-button" slot="button">
+    {{ currentValue }}/100
+  </view>
+</van-slider>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50
+  },
+
+  onDrag(event) {
+    this.setData({
+      currentValue: event.detail.value
+    });
+  }
+});
 ```
 
 #### 自定义按钮
@@ -72,7 +110,7 @@ Page({
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       |
+| 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | value | 当前进度百分比，取值范围为 0-100 | `Number` | `0` |
 | disabled | 是否禁用滑块 | `Boolean` | `false` |
@@ -80,6 +118,8 @@ Page({
 | min | 最小值 | `Number` | `0` |
 | step | 步长 | `Number` | `1` |
 | bar-height | 进度条高度 | `String` | `2px` |
+| active-color | 进度条激活态颜色 | `String` | `#1989fa` |
+| inactive-color | 进度条默认颜色 | `String` | `#e5e5e5` |
 
 ### Event
 
diff --git a/packages/slider/index.ts b/packages/slider/index.ts
index d09cd1ea..ec926538 100644
--- a/packages/slider/index.ts
+++ b/packages/slider/index.ts
@@ -7,6 +7,8 @@ VantComponent({
   props: {
     disabled: Boolean,
     useButtonSlot: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     max: {
       type: Number,
       value: 100
@@ -80,6 +82,7 @@ VantComponent({
       });
 
       this.$emit('drag', { value });
+
       if (end) {
         this.$emit('change', value);
       }
diff --git a/packages/slider/index.wxml b/packages/slider/index.wxml
index b7497989..e57d1e9c 100644
--- a/packages/slider/index.wxml
+++ b/packages/slider/index.wxml
@@ -1,8 +1,12 @@
 <view
   class="custom-class van-slider {{ disabled ? 'van-slider--disabled' : '' }}"
+  style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}"
   bind:tap="onClick"
 >
-  <view class="van-slider__bar" style="{{ barStyle }}">
+  <view
+    class="van-slider__bar"
+    style="{{ barStyle }}; {{ activeColor ? 'background:' + activeColor : '' }}"
+  >
     <view
       class="van-slider__button-wrapper"
       bind:touchstart="onTouchStart"