[improvement] Slider: min/max can set any value (#3566)

packages/slider/demo/index.vue

@@ -10,8 +10,8 @@
     <demo-block :title="$t('title2')">
       <van-slider
         v-model="value2"
-        :min="10"
-        :max="90"
+        :min="-50"
+        :max="50"
         @change="onChange"
       />
     </demo-block>
@@ -97,7 +97,7 @@ export default {
   data() {
     return {
       value1: 50,
-      value2: 50,
+      value2: 0,
       value3: 50,
       value4: 50,
       value5: 50,

packages/slider/en-US.md

@@ -35,7 +35,7 @@ export default {
 ### Range
 
 ```html
-<van-slider v-model="value" :min="10" :max="90" />
+<van-slider v-model="value" :min="-50" :max="50" />
 ```
 
 ### Disabled

packages/slider/index.js

@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { use } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { preventDefault } from '../utils/dom/event';
 
@@ -28,6 +28,12 @@ export default sfc({
     }
   },
 
+  computed: {
+    range() {
+      return this.max - this.min;
+    }
+  },
+
   methods: {
     onTouchStart(event) {
       if (this.disabled) {
@@ -45,17 +51,17 @@ export default sfc({
       }
 
       if (this.dragStatus === 'start') {
-        this.dragStatus = 'draging';
         this.$emit('drag-start');
       }
 
       preventDefault(event, true);
       this.touchMove(event);
+      this.dragStatus = 'draging';
 
       const rect = this.$el.getBoundingClientRect();
       const delta = this.vertical ? this.deltaY : this.deltaX;
       const total = this.vertical ? rect.height : rect.width;
-      const diff = (delta / total) * 100;
+      const diff = (delta / total) * this.range;
 
       this.newValue = this.startValue + diff;
       this.updateValue(this.newValue);
@@ -66,14 +72,12 @@ export default sfc({
         return;
       }
 
-      if (isDef(this.newValue)) {
+      if (this.dragStatus === 'draging') {
         this.updateValue(this.newValue, true);
+        this.$emit('drag-end');
       }
 
-      if (this.dragStatus === 'draging') {
-        this.$emit('drag-end');
-        this.dragStatus = '';
-      }
+      this.dragStatus = '';
     },
 
     onClick(event) {
@@ -84,7 +88,7 @@ export default sfc({
       const rect = this.$el.getBoundingClientRect();
       const delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
       const total = this.vertical ? rect.height : rect.width;
-      const value = (delta / total) * 100;
+      const value = (delta / total) * this.range + this.min;
 
       this.updateValue(value, true);
     },
@@ -115,7 +119,7 @@ export default sfc({
     const crossAxis = vertical ? 'width' : 'height';
 
     const barStyle = {
-      [mainAxis]: `${this.format(this.value)}%`,
+      [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`,
       [crossAxis]: this.barHeight,
       background: this.activeColor
     };

packages/slider/test/__snapshots__/demo.spec.js.snap

@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 2px;">
-        <div role="slider" tabindex="0" aria-valuemin="10" aria-valuenow="50" aria-valuemax="90" aria-orientation="horizontal" class="van-slider__button-wrapper">
+        <div role="slider" tabindex="0" aria-valuemin="-50" aria-valuenow="0" aria-valuemax="50" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
       </div>

packages/slider/zh-CN.md

@@ -35,7 +35,7 @@ export default {
 ### 指定选择范围
 
 ```html
-<van-slider v-model="value" :min="10" :max="90" />
+<van-slider v-model="value" :min="-50" :max="50" />
 ```
 
 ### 禁用