From dfc55d48b607a8c6fb010e47412dc42a9836ba19 Mon Sep 17 00:00:00 2001
From: Warinyourself <warinyourself@gmail.com>
Date: Tue, 23 Jun 2026 11:49:01 +0300
Subject: [PATCH] Add real-time drag updates to AppSlider via onInput + pointer
 events

---
 src/components/app/AppSlider.tsx | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/app/AppSlider.tsx b/src/components/app/AppSlider.tsx
index f1a7e4b..c32d49f 100644
--- a/src/components/app/AppSlider.tsx
+++ b/src/components/app/AppSlider.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
@@ -10,20 +10,36 @@ export default defineComponent({
     from: { type: Number, default: 0 },
     to: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
-    changeOnUpdate: { type: Boolean, default: false }
+    changeOnUpdate: { type: Boolean, default: false } // kept for API compat, ignored
   },
 
   emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const { t } = useI18n()
+    const dragging = ref(false)
+
+    // Local display value tracks thumb position during drag without touching the store
+    const localValue = ref<number | null>(null)
+    const displayValue = computed(() => localValue.value ?? props.modelValue)
 
     const progress = computed(() => {
       const range = props.to - props.from
-      return range === 0 ? 0 : ((props.modelValue - props.from) / range) * 100
+      return range === 0 ? 0 : ((displayValue.value - props.from) / range) * 100
     })
 
-    const onChange = (event: Event) => {
+    const onInput = (event: Event) => {
+      const v = parseFloat((event.target as HTMLInputElement).value)
+      localValue.value = v
+      emit('update:modelValue', v)
+    }
+
+    const onPointerDown = () => { dragging.value = true }
+
+    const onPointerUp = (event: Event) => {
+      dragging.value = false
+      localValue.value = null
+      // Emit final value on release to guarantee sync
       emit('update:modelValue', parseFloat((event.target as HTMLInputElement).value))
     }
 
@@ -31,7 +47,7 @@ export default defineComponent({
       <div class="app-slider">
         <div class="app-slider__content">
           <p class="mb-2">{t(props.label)}</p>
-          <span class={"caption"}>{props.modelValue}</span>
+          <span class="caption">{displayValue.value}</span>
         </div>
         <div class="center-x">
           <input
@@ -42,8 +58,9 @@ export default defineComponent({
             max={props.to}
             step={props.step}
             value={props.modelValue}
-            onInput={props.changeOnUpdate ? onChange : undefined}
-            onChange={!props.changeOnUpdate ? onChange : undefined}
+            onInput={onInput}
+            onPointerdown={onPointerDown}
+            onPointerup={onPointerUp}
           />
         </div>
       </div>