fix(Slider): format v-model with step correctly (#8894)

src/slider/index.js

@@ -1,6 +1,7 @@
 import { createNamespace, addUnit } from '../utils';
 import { deepClone } from '../utils/deep-clone';
 import { preventDefault } from '../utils/dom/event';
+import { range, addNumber } from '../utils/format/number';
 import { TouchMixin } from '../mixins/touch';
 import { FieldMixin } from '../mixins/field';
 
@@ -183,10 +184,13 @@ export default createComponent({
     },
 
     format(value) {
-      return (
-        Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) *
-        this.step
-      );
+      const min = +this.min;
+      const max = +this.max;
+      const step = +this.step;
+
+      value = range(value, min, max);
+      const diff = Math.round((value - min) / step) * step;
+      return addNumber(min, diff);
     },
   },
 

src/stepper/index.js

@@ -1,7 +1,7 @@
 import { createNamespace, isDef, addUnit } from '../utils';
 import { resetScroll } from '../utils/dom/reset-scroll';
 import { preventDefault } from '../utils/dom/event';
-import { formatNumber } from '../utils/format/number';
+import { addNumber, formatNumber } from '../utils/format/number';
 import { isNaN } from '../utils/validate/number';
 import { FieldMixin } from '../mixins/field';
 
@@ -14,12 +14,6 @@ function equal(value1, value2) {
   return String(value1) === String(value2);
 }
 
-// add num and avoid float number
-function add(num1, num2) {
-  const cardinal = 10 ** 10;
-  return Math.round((num1 + num2) * cardinal) / cardinal;
-}
-
 export default createComponent({
   mixins: [FieldMixin],
 
@@ -193,7 +187,7 @@ export default createComponent({
         event.target.value = formatted;
       }
 
-      // perfer number type
+      // prefer number type
       if (formatted === String(+formatted)) {
         formatted = +formatted;
       }
@@ -220,14 +214,14 @@ export default createComponent({
 
       const diff = type === 'minus' ? -this.step : +this.step;
 
-      const value = this.format(add(+this.currentValue, diff));
+      const value = this.format(addNumber(+this.currentValue, diff));
 
       this.emitChange(value);
       this.$emit(type);
     },
 
     onFocus(event) {
-      // readonly not work in lagacy mobile safari
+      // readonly not work in legacy mobile safari
       if (this.disableInput && this.$refs.input) {
         this.$refs.input.blur();
       } else {
@@ -324,7 +318,7 @@ export default createComponent({
           style={this.inputStyle}
           disabled={this.disabled}
           readonly={this.disableInput}
-          // set keyboard in mordern browers
+          // set keyboard in modern browsers
           inputmode={this.integer ? 'numeric' : 'decimal'}
           placeholder={this.placeholder}
           aria-valuemax={this.max}

src/utils/format/number.ts

@@ -44,3 +44,9 @@ export function formatNumber(
 
   return value.replace(regExp, '');
 }
+
+// add num and avoid float number
+export function addNumber(num1: number, num2: number) {
+  const cardinal = 10 ** 10;
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+}