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

src/slider/Slider.tsx

@@ -2,7 +2,9 @@ import { ref, computed, PropType, CSSProperties, defineComponent } from 'vue';
 
 // Utils
 import {
+  range,
   addUnit,
+  addNumber,
   getSizeStyle,
   preventDefault,
   stopPropagation,
@@ -102,9 +104,13 @@ export default defineComponent({
     });
 
     const format = (value: number) => {
-      const { min, max, step } = props;
-      value = Math.max(+min, Math.min(value, +max));
-      return Math.round(value / +step) * +step;
+      const min = +props.min;
+      const max = +props.max;
+      const step = +props.step;
+
+      value = range(value, min, max);
+      const diff = Math.round((value - min) / step) * step;
+      return addNumber(min, diff);
     };
 
     const isSameValue = (newValue: SliderValue, oldValue: SliderValue) =>

src/slider/test/index.spec.ts

@@ -1,5 +1,6 @@
 import { Slider } from '..';
 import {
+  later,
   mount,
   trigger,
   triggerDrag,
@@ -144,7 +145,7 @@ test('should change slider bar height when using bar-height prop', () => {
   expect(wrapper.style.height).toEqual('10px');
 });
 
-test('shoud change button size when using button-size prop', () => {
+test('should change button size when using button-size prop', () => {
   const wrapper = mount(Slider, {
     props: {
       modelValue: 50,
@@ -187,3 +188,18 @@ test('should not emit change event when value not changed', async () => {
 
   expect(wrapper.emitted('change')!.length).toEqual(1);
 });
+
+// https://github.com/youzan/vant/issues/8889
+test('should format v-model with step correctly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      min: 29,
+      max: 39,
+      step: 2,
+      modelValue: 30.5,
+    },
+  });
+
+  await later();
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual([31]);
+});