feat: support event change

Author: wiidede

README.md

@@ -122,6 +122,12 @@ generic="T = any, U = number | RangeData\<T>"
 | renderBottomOnActive | boolean                            | Specifies whether to render only while the thumb is active                                                                                                     | false              |
 | marks                | RangeMarks                         | Show marks under the track                                                                                                                                     | undefined          |
 
+## Events
+
+| Name   | Type                                                                 | Description                                                |
+| ------ | -------------------------------------------------------------------- | ---------------------------------------------------------- |
+| change | (value: RangeValue<T, U>, thumbValue: U, thumbIndex: number) => void | It will emit when thumb `pointerup` (after move the thumb) |
+
 ## slots
 
 | Name   | Type        | Description                                                         |

src/Range.vue

@@ -40,6 +40,7 @@ const props = withDefaults(defineProps<{
 
 const emits = defineEmits<{
   (e: 'update:modelValue', modelValue: typeof props.modelValue): void
+  (e: 'change', value: RangeValue<T, U>, thumbValue: U, thumbIndex: number): void
 }>()
 
 defineSlots<{
@@ -316,6 +317,7 @@ provide(RangeTrackRefKey, trackRef)
         @update="onUpdate"
         @delete="onDelete"
         @pointerdown="current = Number(idx)"
+        @change="emits('change', props.modelValue, Array.isArray(props.modelValue) ? props.modelValue[index] : props.modelValue, index)"
       >
         <template #top="{ data }">
           <slot name="top" :data="data" />

src/RangeThumb.vue

@@ -27,6 +27,7 @@ const emits = defineEmits<{
   (e: 'deleting'): void
   (e: 'cancelDelete'): void
   (e: 'moveDone'): void
+  (e: 'change'): void
 }>()
 
 defineSlots<{
@@ -42,6 +43,8 @@ const cursor = computed(() => props.disabled ? 'cursor-not-allowed' : removable.
 
 const deleting = ref(false)
 
+let moved = false
+
 function setTrackCursor(cursor: string | undefined) {
   if (!trackRef?.value)
     return
@@ -70,6 +73,7 @@ function shouldDelete(offset: number) {
 function onPointerMove(e: PointerEvent) {
   if (!thumbRef.value || !trackRef?.value || props.disabled)
     return
+  moved = true
   const trackRect = trackRef.value.getBoundingClientRect()
   const offset = props.vertical ? e.clientY - trackRect.top : e.clientX - trackRect.left
   const percent = offset / (props.vertical ? trackRect.height : trackRect.width) * 100
@@ -87,6 +91,10 @@ function onPointerUp(e: PointerEvent) {
   window.removeEventListener('pointermove', onPointerMove)
   window.removeEventListener('pointerup', onPointerUp)
   window.removeEventListener('pointercancel', onPointerUp)
+  if (moved) {
+    emits('change')
+    moved = false
+  }
   if (e.type === 'pointercancel' || props.disabled) {
     setTrackCursor(undefined)
     emits('moveDone')
@@ -111,6 +119,7 @@ async function onPointerDown(e: PointerEvent) {
     return
   }
   setTrackCursor(cursor.value)
+  moved = false
   window.addEventListener('pointermove', onPointerMove, { passive: false })
   window.addEventListener('pointerup', onPointerUp)
   window.addEventListener('pointercancel', onPointerUp)