debut on change

src/components/LayoutPanelComp.vue

@@ -65,13 +65,22 @@
 
             <!--Spacing-->
             <div class="my-3">
-            <ParamContinuousSlider name="Minimal horizontal spacing" :min="5" :max="300" :step="5" unit="px" v-model="parameters.spacePixelHorizontalUser"/>
+            <ParamContinuousSlider name="Minimal horizontal spacing" 
+            :min="5" :max="300" :step="5" unit="px" 
+            v-model="parameters.spacePixelHorizontalUser"
+            @startSlider="sliderMovementOn()"
+            @endSlider="sliderMovementOff()"
+            />
             <HelpText :show-help="showHelp">
              Minimal horizontal spacing between nodes for hierarchical layout
             </HelpText>
             </div>
             <div class="my-3">
-            <ParamContinuousSlider name="Minimal vertical spacing" :min="5" :max="300" :step="5" unit="px" v-model="parameters.spacePixelVerticalUser"/>
+            <ParamContinuousSlider name="Minimal vertical spacing" 
+            :min="5" :max="300" :step="5" unit="px" 
+            v-model="parameters.spacePixelVerticalUser"
+            @startSlider="sliderMovementOn()"
+            @endSlider="sliderMovementOff()"/>
             <HelpText :show-help="showHelp">
               Minimal vertical spacing between nodes for hierarchical layout
             </HelpText>
@@ -235,11 +244,35 @@ const mainChainChoices:typeChoiceSelect= Object.values(mainChain);
 const defaultParameters:userParamType = getDefaultUserParam();
 const parameters=reactive({...defaultParameters});
 
+
+// start-end parameters slider movement
+let sliderMovement:Ref<boolean>=ref(false);
+
+function sliderMovementOn():void{
+  sliderMovement.value=true;
+}
+
+function sliderMovementOff():void{
+  sliderMovement.value=false;
+  console.log("stop ",sliderMovement);
+
+}
+
+// layout on change of parameters : (but if slider on)
 watch( parameters, (newValue, oldValue) => {
+  if(!sliderMovement.value){
+    // if change of parameters but no slider movement : apply layout
     console.log('Parameters changed:', { newValue, oldValue });
-  },
-  { deep: true } // Ensure it watches deeply
-);
+  }
+});
+
+// layout on end of slider
+watch(sliderMovement, (newValue, oldValue) => {
+  if(!sliderMovement.value){
+    // if change of slider  and end movement : apply layout
+    console.log('Parameters changed slider:', { newValue, oldValue });
+  }
+});
 
 
 ///////////////////////////////////////////////////////////////////

src/components/ParamComp/ParamContinuousSliderComp.vue

@@ -13,6 +13,8 @@
         tick-size="4"
         thumb-size="15"
         :hide-details="true"
+        @start="emits('startSlider');"
+        @end="emits('endSlider');"
         >
         <template v-slot:append>
           <v-number-input control-variant="stacked"  
@@ -66,6 +68,8 @@ const props = defineProps({
     
 });
 
+const emits = defineEmits(["startSlider","endSlider"])
+
 //---------------------------- Get Set Value -------------------------
 
 const size=defineModel({type:Number});