[new feature] Slider: add active-color、inactive-color prop (#1150)

example/pages/slider/index.js

@@ -2,7 +2,7 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    currentValue: 30
+    currentValue: 50
   },
 
   onChange(event) {

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>

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;

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
 

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);
       }

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"