fix(slider): [slider]The Slider component should prompt an error when min > max (#1156)

* docs(slider): [slider]remove the ref attribute of ref in basic-usage

* fix(slider): [slider]component should prompt an error when min>max

* test(slider): [slider]add unit test for the min and max props

examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="setValue">设置值</tiny-button>
-    <tiny-slider v-model="value" ref="sliderRef"></tiny-slider>
+    <tiny-slider v-model="value"></tiny-slider>
   </div>
 </template>
 

examples/sites/demos/pc/app/slider/basic-usage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="setValue">设置值</tiny-button>
-    <tiny-slider v-model="value" ref="slider"></tiny-slider>
+    <tiny-slider v-model="value"></tiny-slider>
   </div>
 </template>
 

packages/renderless/src/slider/vue.ts

@@ -165,7 +165,16 @@ export const renderless = (
     handleSlotInput: handleSlotInput(state)
   })
 
-  watch(() => props.modelValue, api.watchModelValue, { immediate: true })
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (props.max < props.min) {
+        throw new Error('Slider min should not be greater than max.')
+      }
+      api.watchModelValue(value)
+    },
+    { immediate: true }
+  )
   watch(() => state.activeValue, api.watchActiveValue, { immediate: true })
 
   watch(

packages/vue/src/slider/__tests__/slider.test.tsx

@@ -1,7 +1,7 @@
 import { mountPcMode } from '@opentiny-internal/vue-test-utils'
 import { describe, expect, test, vi } from 'vitest'
 import Slider from '@opentiny/vue-slider'
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 
 let value = 40
 
@@ -18,9 +18,37 @@ describe('PC Mode', () => {
 
   test.todo('disabled 是否禁用')
 
-  test.todo('min 设置最小值。')
+  test('min 设置最小值。', async () => {
+    const value = ref(60)
+    mount(() => <Slider v-model={value.value} min={50} />)
 
-  test.todo('max 设置最大值。必需是整数，可以负数。必需大于所设置的最小值。')
+    await nextTick()
+    value.value = 40
+    await nextTick()
+    expect(value.value).toBe(50)
+    value.value = 120
+    await nextTick()
+    expect(value.value).toBe(100)
+  })
+
+  test('max 设置最大值。必需是整数，可以负数。必需大于所设置的最小值。', async () => {
+    const value = ref(60)
+
+    mount(() => <Slider v-model={value.value} min={-10} max={-5} />)
+
+    await nextTick()
+    expect(value.value).toBe(-5)
+  })
+
+  test('min 大于 max的时候报错', async () => {
+    try {
+      const value = ref(60)
+      mount(() => <Slider v-model={value.value} min={10} max={5} />)
+    } catch (error) {
+      expect(error).to.be.an('error')
+      expect(error.message).to.equal('Slider min should not be greater than max.')
+    }
+  })
 
   test.todo('step 设置滑块移动时，每步位移距离，必需是大于0的正整数。')
 
@@ -48,8 +76,7 @@ describe('PC Mode', () => {
         show-input={true}
         v-slots={{
           default: (slotScope) => <b class="onlyText">{slotScope.slotScope}%</b>
-        }}
-      ></Slider>
+        }}></Slider>
     ))
     expect(wrapper.find('.onlyText').text()).toBe(`${value}%`)
   })