fix(ui): align ColorHueRange model binding (#681)

Co-authored-by: whyXVI <lain_zcb@bupt.edu.cn>

Author: s3d-i

packages/ui/src/components/Form/Range/ColorHueRange.vue

@@ -1,18 +1,27 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   disabled?: boolean
   class?: string
 }>()
 
-const colorValue = defineModel<string>('colorValue', {
-  type: String,
-  default: '',
+const modelValue = defineModel<number>({ required: true })
+
+const sliderValue = computed({
+  get: () => modelValue.value,
+  set: (value: number) => {
+    if (Number.isNaN(value))
+      return
+
+    modelValue.value = value
+  },
 })
 </script>
 
 <template>
   <input
-    v-model="colorValue"
+    v-model.number="sliderValue"
     type="range" min="0" max="360" step="0.01"
     class="color-hue-range"
     transition="all ease-in-out duration-250"