feat(Slider): min & max support arbitrary value (#1974)

example/pages/slider/index.wxml

@@ -9,9 +9,8 @@
 <demo-block title="指定选择范围">
   <van-slider
     custom-class="slider"
-    value="50"
-    min="10"
-    max="90"
+    min="-50"
+    max="50"
     bind:change="onChange"
   />
 </demo-block>

packages/slider/README.md

@@ -29,7 +29,7 @@ Page({
 ### 指定选择范围
 
 ```html
-<van-slider value="50" min="10" max="90" />
+<van-slider min="-50" max="50" />
 ```
 
 ### 禁用

packages/slider/index.ts

@@ -70,19 +70,22 @@ VantComponent({
     onClick(event: Weapp.TouchEvent) {
       if (this.data.disabled) return;
 
+      const { min } = this.data;
+
       this.getRect('.van-slider').then((rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-        const value = (event.detail.x - rect.left) / rect.width * 100;
+        const value = (event.detail.x - rect.left) / rect.width * this.getRange() + min;
         this.updateValue(value, true);
       });
     },
 
     updateValue(value: number, end: boolean, drag: boolean) {
       value = this.format(value);
-      const { barHeight } = this.data;
+      const { barHeight, min } = this.data;
+      const width = `${((value - min) * 100) / this.getRange()}%`;
 
       this.set({
         value,
-        barStyle: `width: ${value}%; height: ${addUnit(barHeight)};`
+        barStyle: `width: ${width}; height: ${addUnit(barHeight)};`
       });
 
       if (drag) {
@@ -94,6 +97,11 @@ VantComponent({
       }
     },
 
+    getRange() {
+      const { max, min } = this.data;
+      return max - min;
+    },
+
     format(value: number) {
       const { max, min, step } = this.data;
       return Math.round(Math.max(min, Math.min(value, max)) / step) * step;