diff --git a/packages/slider/demo/index.vue b/packages/slider/demo/index.vue
index 0b299648c..2dd14769a 100644
--- a/packages/slider/demo/index.vue
+++ b/packages/slider/demo/index.vue
@@ -35,12 +35,16 @@
       <van-slider
         v-model="value5"
         bar-height="4px"
+        active-color="#f44"
         @change="onChange"
       />
     </demo-block>
 
     <demo-block :title="$t('customButton')">
-      <van-slider v-model="value6">
+      <van-slider
+        v-model="value6"
+        active-color="#f44"
+      >
         <div
           slot="button"
           class="custom-button"
diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md
index f58e7308c..f89337284 100644
--- a/packages/slider/en-US.md
+++ b/packages/slider/en-US.md
@@ -51,13 +51,20 @@ export default {
 #### Custom style
 
 ```html
-<van-slider v-model="value" bar-height="4px" />
+<van-slider
+  v-model="value"
+  bar-height="4px"
+  active-color="#f44"
+/>
 ```
 
 #### Custom button
 
 ```html
-<van-slider v-model="value">
+<van-slider
+  v-model="value"
+  active-color="#f44"
+>
   <div
     slot="button"
     class="custom-button"
@@ -77,6 +84,8 @@ export default {
 | min | Min value | `Number` | `0` |
 | step | Step size | `Number` | `1` |
 | bar-height | Height of bar | `String` | `2px` |
+| active-color | Active color of bar | `String` | `#1989fa` |
+| inactive-color | Inactive color of bar | `String` | `#e5e5e5` |
 
 ### Event
 
diff --git a/packages/slider/index.vue b/packages/slider/index.vue
index d08ede0fe..606e51c5f 100644
--- a/packages/slider/index.vue
+++ b/packages/slider/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     :class="b({ disabled })"
+    :style="style"
     @click.stop="onClick"
   >
     <div
@@ -35,6 +36,8 @@ export default create({
     min: Number,
     value: Number,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     max: {
       type: Number,
       default: 100
@@ -50,10 +53,17 @@ export default create({
   },
 
   computed: {
+    style() {
+      return {
+        background: this.inactiveColor
+      };
+    },
+
     barStyle() {
       return {
         width: this.format(this.value) + '%',
-        height: this.barHeight
+        height: this.barHeight,
+        background: this.activeColor
       };
     }
   },
diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap
index cf341afc3..2bc374793 100644
--- a/packages/slider/test/__snapshots__/demo.spec.js.snap
+++ b/packages/slider/test/__snapshots__/demo.spec.js.snap
@@ -3,8 +3,8 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+    <div class="van-slider" style="background:undefined;">
+      <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -12,8 +12,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+    <div class="van-slider" style="background:undefined;">
+      <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -21,8 +21,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-slider van-slider--disabled">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+    <div class="van-slider van-slider--disabled" style="background:undefined;">
+      <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -30,8 +30,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+    <div class="van-slider" style="background:undefined;">
+      <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:4px;">
+    <div class="van-slider" style="background:undefined;">
+      <div class="van-slider__bar" style="width:50%;height:4px;background:#f44;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -48,8 +48,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+    <div class="van-slider" style="background:undefined;">
+      <div class="van-slider__bar" style="width:50%;height:2px;background:#f44;">
         <div class="van-slider__button-wrapper">
           <div class="custom-button">
             50
diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md
index e051ad934..d430913ca 100644
--- a/packages/slider/zh-CN.md
+++ b/packages/slider/zh-CN.md
@@ -50,13 +50,20 @@ export default {
 #### 自定义样式
 
 ```html
-<van-slider v-model="value" bar-height="4px" />
+<van-slider
+  v-model="value"
+  bar-height="4px"
+  active-color="#f44"
+/>
 ```
 
 #### 自定义按钮
 
 ```html
-<van-slider v-model="value">
+<van-slider
+  v-model="value"
+  active-color="#f44"
+>
   <div
     slot="button"
     class="custom-button"
@@ -76,6 +83,8 @@ export default {
 | min | 最小值 | `Number` | `0` | 1.1.0 |
 | step | 步长 | `Number` | `1` | 1.1.0 |
 | bar-height | 进度条高度 | `String` | `2px` | 1.1.0 |
+| active-color | 进度条激活态颜色 | `String` | `#1989fa` | 1.5.1 |
+| inactive-color | 进度条默认颜色 | `String` | `#e5e5e5` | 1.5.1 |
 
 ### Event