Added defineModel support for PreviewSlider component.

src/components/common/PreviewSlider.vue

@@ -2,15 +2,7 @@
   <div class="preview-slider">
     <span class="slider-label">{{ title }}</span>
 
-    <Slider
+    <Slider v-model="model" :min="min" :max="max" :step="step" :disabled="disabled" class="custom-slider" />
-      :model-value="modelValue"
-      @update:model-value="handleSliderChange"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      class="custom-slider"
-    />
 
     <span class="slider-value">{{ modelValue }}{{ valueUnit }}</span>
   </div>
@@ -21,7 +13,6 @@ import Slider from 'primevue/slider';
 
 defineProps<{
   title: string;
-  modelValue: number;
   min?: number;
   max?: number;
   step?: number;
@@ -29,14 +20,7 @@ defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
+const model = defineModel<number>();
-  'update:modelValue': [value: number];
-}>();
-
-const handleSliderChange = (value: number | number[]) => {
-  const numValue = Array.isArray(value) ? value[0] : value;
-  emit('update:modelValue', numValue);
-};
 </script>
 
 <style scoped>

src/demo/Animations/AnimatedContentDemo.vue

@@ -35,7 +35,6 @@
           :min="50"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -45,7 +44,6 @@
           :max="3"
           :step="0.1"
           value-unit="s"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -55,7 +53,6 @@
           :max="2"
           :step="0.1"
           value-unit="s"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -64,7 +61,6 @@
           :min="0"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -73,7 +69,6 @@
           :min="0.1"
           :max="2"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -82,7 +77,6 @@
           :min="0.1"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />

src/demo/Animations/BlobCursorDemo.vue

@@ -68,11 +68,6 @@
           :max="200"
           :step="1"
           v-model="sizes[0]"
-          @onChange="
-            (val: number) => {
-              sizes[0] = val;
-            }
-          "
           :isDisabled="trailCount < 1"
         />
 
@@ -82,11 +77,6 @@
           :max="100"
           :step="1"
           v-model="innerSizes[0]"
-          @onChange="
-            (val: number) => {
-              innerSizes[0] = val;
-            }
-          "
           :isDisabled="trailCount < 1"
         />
 
@@ -96,91 +86,20 @@
           :max="1"
           :step="0.05"
           v-model="opacities[0]"
-          @onChange="
-            (val: number) => {
-              opacities[0] = val;
-            }
-          "
           :isDisabled="trailCount < 1"
         />
 
-        <PreviewSlider
+        <PreviewSlider title="Shadow Blur" :min="0" :max="50" :step="1" v-model="shadowBlur" />
-          title="Shadow Blur"
-          :min="0"
-          :max="50"
-          :step="1"
-          v-model="shadowBlur"
-          @onChange="
-            (val: number) => {
-              shadowBlur = val;
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Shadow Offset X" :min="-50" :max="50" :step="1" v-model="shadowOffsetX" />
-          title="Shadow Offset X"
-          :min="-50"
-          :max="50"
-          :step="1"
-          v-model="shadowOffsetX"
-          @onChange="
-            (val: number) => {
-              shadowOffsetX = val;
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Shadow Offset Y" :min="-50" :max="50" :step="1" v-model="shadowOffsetY" />
-          title="Shadow Offset Y"
-          :min="-50"
-          :max="50"
-          :step="1"
-          v-model="shadowOffsetY"
-          @onChange="
-            (val: number) => {
-              shadowOffsetY = val;
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Fast Duration (Lead)" :min="0.01" :max="2" :step="0.01" v-model="fastDuration" />
-          title="Fast Duration (Lead)"
-          :min="0.01"
-          :max="2"
-          :step="0.01"
-          v-model="fastDuration"
-          @onChange="
-            (val: number) => {
-              fastDuration = val;
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Slow Duration (Trail)" :min="0.01" :max="3" :step="0.01" v-model="slowDuration" />
-          title="Slow Duration (Trail)"
-          :min="0.01"
-          :max="3"
-          :step="0.01"
-          v-model="slowDuration"
-          @onChange="
-            (val: number) => {
-              slowDuration = val;
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Z-Index" :min="0" :max="1000" :step="10" v-model="zIndex" />
-          title="Z-Index"
-          :min="0"
-          :max="1000"
-          :step="10"
-          v-model="zIndex"
-          @onChange="
-            (val: number) => {
-              zIndex = val;
-            }
-          "
-        />
       </Customize>
 
       <p class="flex items-center gap-[0.5em] mx-0 my-[1em] text-[#a1a1aa]">

src/demo/Animations/ClickSparkDemo.vue

@@ -24,50 +24,15 @@
       <Customize>
         <PreviewColor title="Spark Color" v-model="sparkColor" />
 
-        <PreviewSlider
+        <PreviewSlider title="Spark Size" v-model="sparkSize" :min="5" :max="30" :step="1" />
-          title="Spark Size"
-          v-model="sparkSize"
-          :min="5"
-          :max="30"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Spark Radius" v-model="sparkRadius" :min="10" :max="50" :step="5" />
-          title="Spark Radius"
-          v-model="sparkRadius"
-          :min="10"
-          :max="50"
-          :step="5"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Spark Count" v-model="sparkCount" :min="4" :max="20" :step="1" />
-          title="Spark Count"
-          v-model="sparkCount"
-          :min="4"
-          :max="20"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Duration (ms)" v-model="duration" :min="200" :max="1000" :step="50" />
-          title="Duration (ms)"
-          v-model="duration"
-          :min="200"
-          :max="1000"
-          :step="50"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Extra Scale" v-model="extraScale" :min="0.5" :max="2" :step="0.1" />
-          title="Extra Scale"
-          v-model="extraScale"
-          :min="0.5"
-          :max="2"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -103,7 +68,7 @@ const sparkCount = ref(8);
 const duration = ref(400);
 const easing = ref<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'>('ease-out');
 const extraScale = ref(1);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   { name: 'sparkColor', type: 'string', default: "'#fff'", description: 'Color of the spark lines.' },

src/demo/Animations/FadeContentDemo.vue

@@ -31,7 +31,6 @@
           :min="100"
           :max="3000"
           :step="100"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -40,7 +39,6 @@
           :min="0"
           :max="1000"
           :step="50"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -49,7 +47,6 @@
           :min="0.1"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -58,7 +55,6 @@
           :min="0"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 

src/demo/Animations/MagnetDemo.vue

@@ -36,7 +36,6 @@
           :max="300"
           :step="10"
           value-unit="px"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -45,7 +44,6 @@
           :min="1"
           :max="10"
           :step="1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 

src/demo/Animations/MetaBallsDemo.vue

@@ -25,11 +25,6 @@
           :max="30"
           :step="1"
           v-model="ballCount"
-          @onChange="
-            (val: number) => {
-              ballCount = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -38,11 +33,6 @@
           :max="1"
           :step="0.1"
           v-model="speed"
-          @onChange="
-            (val: number) => {
-              speed = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -51,11 +41,6 @@
           :max="50"
           :step="1"
           v-model="animationSize"
-          @onChange="
-            (val: number) => {
-              animationSize = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -64,11 +49,6 @@
           :max="2"
           :step="0.1"
           v-model="clumpFactor"
-          @onChange="
-            (val: number) => {
-              clumpFactor = val;
-            }
-          "
         />
 
         <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
@@ -79,11 +59,6 @@
           :max="0.25"
           :step="0.001"
           v-model="hoverSmoothness"
-          @onChange="
-            (val: number) => {
-              hoverSmoothness = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -92,11 +67,6 @@
           :max="5"
           :step="1"
           v-model="cursorBallSize"
-          @onChange="
-            (val: number) => {
-              cursorBallSize = val;
-            }
-          "
         />
       </Customize>
 

src/demo/Animations/MetallicPaintDemo.vue

@@ -26,7 +26,6 @@
           :min="1"
           :max="5"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -35,7 +34,6 @@
           :min="0"
           :max="0.1"
           :step="0.001"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -44,7 +42,6 @@
           :min="0"
           :max="0.1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -53,7 +50,6 @@
           :min="0"
           :max="1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -62,7 +58,6 @@
           :min="0"
           :max="1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
       </Customize>
 

src/demo/Animations/PixelTransitionDemo.vue

@@ -28,15 +28,7 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Grid Size" v-model="gridSize" :min="2" :max="50" :step="1" width="200" />
-          title="Grid Size"
-          v-model="gridSize"
-          :min="2"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-          width="200"
-        />
 
         <PreviewSlider
           title="Animation Duration"
@@ -45,7 +37,6 @@
           :max="2"
           :step="0.1"
           value-unit="s"
-          @update:model-value="forceRerender"
           width="200"
         />
 
@@ -81,7 +72,7 @@ import { pixelTransition } from '@/constants/code/Animations/pixelTransitionCode
 import { useForceRerender } from '@/composables/useForceRerender';
 import PreviewColor from '../../components/common/PreviewColor.vue';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 const gridSize = ref(8);
 const pixelColor = ref('#ffffff');
 const animationStepDuration = ref(0.4);

src/demo/Backgrounds/AuroraDemo.vue

@@ -27,41 +27,13 @@
             </div>
           </div>
 
-          <PreviewSlider
+          <PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
-            title="Amplitude"
-            :model-value="amplitude"
-            @update:model-value="amplitude = $event"
-            :min="0"
-            :max="2"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
-            title="Blend"
-            :model-value="blend"
-            @update:model-value="blend = $event"
-            :min="0"
-            :max="1"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0"
-            :max="3"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
-            title="Intensity"
-            :model-value="intensity"
-            @update:model-value="intensity = $event"
-            :min="0"
-            :max="2"
-            :step="0.1"
-          />
         </Customize>
 
         <PropTable :data="propData" />

src/demo/Backgrounds/BeamsDemo.vue

@@ -18,68 +18,19 @@
         <Customize>
           <PreviewColor title="Color" v-model="lightColor" />
 
-          <PreviewSlider
+          <PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
-            title="Beam Width"
-            :model-value="beamWidth"
-            @update:model-value="beamWidth = $event"
-            :min="0.1"
-            :max="10"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
-            title="Beam Height"
-            :model-value="beamHeight"
-            @update:model-value="beamHeight = $event"
-            :min="1"
-            :max="25"
-            :step="1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
-            title="Beam Count"
-            :model-value="beamNumber"
-            @update:model-value="beamNumber = $event"
-            :min="1"
-            :max="50"
-            :step="1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0.1"
-            :max="10"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
-            title="Noise Intensity"
-            :model-value="noiseIntensity"
-            @update:model-value="noiseIntensity = $event"
-            :min="0"
-            :max="5"
-            :step="0.05"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
-            title="Noise Scale"
-            :model-value="scale"
-            @update:model-value="scale = $event"
-            :min="0.01"
-            :max="1"
-            :step="0.01"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
-            title="Rotation"
-            :model-value="rotation"
-            @update:model-value="rotation = $event"
-            :min="0"
-            :max="360"
-            :step="1"
-          />
         </Customize>
 
         <PropTable :data="propData" />

src/demo/Backgrounds/DotGridDemo.vue

@@ -27,79 +27,23 @@
             <PreviewColor title="Active Color" v-model="activeColor" />
           </div>
 
-          <PreviewSlider
+          <PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
-            title="Dot Size"
-            v-model="dotSize"
-            :min="2"
-            :max="50"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" @update:model-value="forceRerender" />
+          <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
 
-          <PreviewSlider
+          <PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
-            title="Proximity"
-            v-model="proximity"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
-            title="Speed Trigger"
-            v-model="speedTrigger"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
-            title="Shock Radius"
-            v-model="shockRadius"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
-            title="Shock Strength"
-            v-model="shockStrength"
-            :min="1"
-            :max="20"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
-            title="Max Speed"
-            v-model="maxSpeed"
-            :min="1000"
-            :max="10000"
-            :step="100"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
-            title="Resistance (Inertia)"
-            v-model="resistance"
-            :min="100"
-            :max="2000"
-            :step="50"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
-            title="Return Duration (Inertia)"
-            v-model="returnDuration"
-            :min="0.1"
-            :max="5"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -143,7 +87,7 @@ const shockStrength = ref(5);
 const maxSpeed = ref(5000);
 const resistance = ref(750);
 const returnDuration = ref(1.5);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   { name: 'dotSize', type: 'number', default: '16', description: 'Size of each dot in pixels.' },

src/demo/Backgrounds/IridescenceDemo.vue

@@ -12,7 +12,7 @@
 
         <PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[2]" title="Blue" />
 
-        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" @update:modelValue="forceRerender" />
+        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed"  />
 
         <PreviewSlider
           :min="0"
@@ -20,7 +20,6 @@
           :step="0.01"
           v-model="amplitude"
           title="Amplitude"
-          @update:modelValue="forceRerender"
         />
 
         <PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />

src/demo/Backgrounds/LetterGlitchDemo.vue

@@ -22,14 +22,7 @@
             Randomize Colors
           </button>
 
-          <PreviewSlider
+          <PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
-            title="Glitch Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0"
-            :max="100"
-            :step="5"
-          />
 
           <PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />
 

src/demo/Backgrounds/LightningDemo.vue

@@ -14,50 +14,15 @@
         </div>
 
         <Customize>
-          <PreviewSlider
+          <PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
-            title="Hue"
-            :model-value="hue"
-            @update:model-value="hue = $event"
-            :min="0"
-            :max="360"
-            :step="1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
-            title="X Offset"
-            :model-value="xOffset"
-            @update:model-value="xOffset = $event"
-            :min="-2"
-            :max="2"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0.5"
-            :max="2"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
-            title="Intensity"
-            :model-value="intensity"
-            @update:model-value="intensity = $event"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
-            title="Size"
-            :model-value="size"
-            @update:model-value="size = $event"
-            :min="0.1"
-            :max="3"
-            :step="0.1"
-          />
         </Customize>
 
         <PropTable :data="propData" />

src/demo/Backgrounds/ParticlesDemo.vue

@@ -22,41 +22,13 @@
             <PreviewColor title="Color" v-model="color" />
           </div>
 
-          <PreviewSlider
+          <PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
-            title="Count"
-            :model-value="particleCount"
-            @update:model-value="particleCount = $event"
-            :min="100"
-            :max="1000"
-            :step="100"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
-            title="Spread"
-            :model-value="particleSpread"
-            @update:model-value="particleSpread = $event"
-            :min="10"
-            :max="100"
-            :step="10"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0"
-            :max="2"
-            :step="0.1"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
-            title="Base Size"
-            :model-value="baseSize"
-            @update:model-value="baseSize = $event"
-            :min="100"
-            :max="1000"
-            :step="100"
-          />
 
           <PreviewSwitch
             title="Mouse Interaction"

src/demo/Backgrounds/SilkDemo.vue

@@ -16,8 +16,7 @@
         <Customize>
           <PreviewSlider
             title="Speed"
-            :model-value="speed"
+            v-model="speed"
-            @update:model-value="speed = $event"
             :min="0"
             :max="10"
             :step="0.1"
@@ -25,8 +24,7 @@
 
           <PreviewSlider
             title="Scale"
-            :model-value="scale"
+            v-model="scale"
-            @update:model-value="scale = $event"
             :min="0.1"
             :max="3"
             :step="0.1"
@@ -34,8 +32,7 @@
 
           <PreviewSlider
             title="Noise Intensity"
-            :model-value="noiseIntensity"
+            v-model="noiseIntensity"
-            @update:model-value="noiseIntensity = $event"
             :min="0"
             :max="3"
             :step="0.1"
@@ -43,8 +40,7 @@
 
           <PreviewSlider
             title="Rotation"
-            :model-value="rotation"
+            v-model="rotation"
-            @update:model-value="rotation = $event"
             :min="0"
             :max="6.28"
             :step="0.1"

src/demo/Backgrounds/WavesDemo.vue

@@ -9,8 +9,7 @@
         <Customize>
           <PreviewSlider
             title="Wave Speed X"
-            :model-value="waveSpeedX"
+            v-model="waveSpeedX"
-            @update:model-value="waveSpeedX = $event"
             :min="0"
             :max="0.1"
             :step="0.01"

src/demo/Components/CarouselDemo.vue

@@ -14,14 +14,7 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10" />
-          title="Width"
-          v-model="width"
-          :min="250"
-          :max="330"
-          :step="10"
-          @update:model-value="forceRerender"
-        />
 
         <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
 
@@ -36,7 +29,6 @@
           :max="4000"
           :step="1000"
           :disabled="!autoplay"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch

src/demo/Components/CircularGalleryDemo.vue

@@ -14,41 +14,13 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Bend Level" v-model="bend" :min="-10" :max="10" :step="1" />
-          title="Bend Level"
-          v-model="bend"
-          :min="-10"
-          :max="10"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Border Radius" v-model="borderRadius" :min="0" :max="0.5" :step="0.01" />
-          title="Border Radius"
-          v-model="borderRadius"
-          :min="0"
-          :max="0.5"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Scroll Speed" v-model="scrollSpeed" :min="0.5" :max="5" :step="0.1" />
-          title="Scroll Speed"
-          v-model="scrollSpeed"
-          :min="0.5"
-          :max="5"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.01" :max="0.15" :step="0.01" />
-          title="Scroll Ease"
-          v-model="scrollEase"
-          :min="0.01"
-          :max="0.15"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
 
         <PreviewColor title="Text Color" v-model="textColor" />
 
@@ -92,7 +64,7 @@ const scrollEase = ref(0.05);
 const textColor = ref('#ffffff');
 const font = ref('bold 30px Figtree');
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const fontOptions = [
   { label: 'Figtree Bold', value: 'bold 30px Figtree' },

src/demo/Components/DockDemo.vue

@@ -21,47 +21,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Background Height" :min="100" :max="200" :step="10" v-model="panelHeight" />
-          title="Background Height"
-          :min="30"
-          :max="200"
-          :step="10"
-          :model-value="panelHeight"
-          @update:model-value="
-            (val: number) => {
-              panelHeight = val;
-              forceRerender();
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Base Item Size" :min="40" :max="100" :step="5" v-model="baseItemSize" />
-          title="Item Size"
-          :min="20"
-          :max="60"
-          :step="10"
-          :model-value="baseItemSize"
-          @update:model-value="
-            (val: number) => {
-              baseItemSize = val;
-              forceRerender();
-            }
-          "
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Magnification" :min="50" :max="100" :step="10" v-model="magnification" />
-          title="Magnification"
-          :min="50"
-          :max="100"
-          :step="10"
-          :model-value="magnification"
-          @update:model-value="
-            (val: number) => {
-              magnification = val;
-              forceRerender();
-            }
-          "
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -80,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue';
+import { ref, h, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -100,6 +64,10 @@ const magnification = ref(70);
 const toast = useToast();
 const { rerenderKey, forceRerender } = useForceRerender();
 
+watch([magnification, panelHeight, baseItemSize], () => {
+  forceRerender();
+});
+
 const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } });
 const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } });
 const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } });

src/demo/Components/FlyingPostersDemo.vue

@@ -22,59 +22,17 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Plane Width" v-model="planeWidth" :min="200" :max="400" :step="20" />
-          title="Plane Width"
-          v-model="planeWidth"
-          :min="200"
-          :max="400"
-          :step="20"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Plane Height" v-model="planeHeight" :min="200" :max="400" :step="20" />
-          title="Plane Height"
-          v-model="planeHeight"
-          :min="200"
-          :max="400"
-          :step="20"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="10" :step="0.5" />
-          title="Distortion"
-          v-model="distortion"
-          :min="0"
-          :max="10"
-          :step="0.5"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.005" :max="0.05" :step="0.005" />
-          title="Scroll Ease"
-          v-model="scrollEase"
-          :min="0.005"
-          :max="0.05"
-          :step="0.005"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Camera FOV" v-model="cameraFov" :min="30" :max="90" :step="5" />
-          title="Camera FOV"
-          v-model="cameraFov"
-          :min="30"
-          :max="90"
-          :step="5"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Camera Z" v-model="cameraZ" :min="10" :max="40" :step="2" />
-          title="Camera Z"
-          v-model="cameraZ"
-          :min="10"
-          :max="40"
-          :step="2"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -112,7 +70,7 @@ const scrollEase = ref(0.01);
 const cameraFov = ref(45);
 const cameraZ = ref(20);
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const items = ref([
   'https://picsum.photos/800/800?grayscale&random=1',

src/demo/Components/GooeyNavDemo.vue

@@ -18,32 +18,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Particle Count" v-model="particleCount" :min="1" :max="50" :step="1" />
-          title="Particle Count"
-          v-model="particleCount"
-          :min="1"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Animation Variance" v-model="timeVariance" :min="0" :max="2000" :step="100" />
-          title="Animation Variance"
-          v-model="timeVariance"
-          :min="0"
-          :max="2000"
-          :step="100"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Radius Factor" v-model="particleR" :min="0" :max="1000" :step="100" />
-          title="Radius Factor"
-          v-model="particleR"
-          :min="0"
-          :max="1000"
-          :step="100"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -74,7 +53,7 @@ import { useForceRerender } from '@/composables/useForceRerender';
 const particleCount = ref(15);
 const timeVariance = ref(300);
 const particleR = ref(100);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const navItems = [
   { label: 'Home', href: null },

src/demo/Components/MasonryDemo.vue

@@ -39,32 +39,11 @@
           ]"
         />
 
-        <PreviewSlider
+        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1" />
-          title="Duration (s)"
-          v-model="duration"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Stagger Delay (s)" v-model="stagger" :min="0.01" :max="0.2" :step="0.01" />
-          title="Stagger Delay (s)"
-          v-model="stagger"
-          :min="0.01"
-          :max="0.2"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Hover Scale" v-model="hoverScale" :min="0.8" :max="1.2" :step="0.05" />
-          title="Hover Scale"
-          v-model="hoverScale"
-          :min="0.8"
-          :max="1.2"
-          :step="0.05"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/Components/StackDemo.vue

@@ -20,7 +20,6 @@
           :min="10"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
         <PreviewSlider
           title="Card Width"
@@ -28,7 +27,6 @@
           :min="10"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
         <PreviewSlider
           title="Card Height"
@@ -36,7 +34,6 @@
           :min="10"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
       </Customize>
       <PropTable :data="propData" />

src/demo/TextAnimations/AsciiTextDemo.vue

@@ -22,7 +22,6 @@
           :min="2"
           :max="20"
           :step="1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -31,7 +30,6 @@
           :min="100"
           :max="400"
           :step="25"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -40,10 +38,9 @@
           :min="4"
           :max="16"
           :step="1"
-          @update:model-value="forceRerender"
         />
 
-        <PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
 
         <div class="flex gap-2 flex-wrap">
           <button

src/demo/TextAnimations/BlurTextDemo.vue

@@ -49,7 +49,6 @@
           :min="50"
           :max="500"
           :step="10"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -58,7 +57,6 @@
           :min="0.1"
           :max="1"
           :step="0.05"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -67,7 +65,6 @@
           :min="0.1"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 

src/demo/TextAnimations/CircularTextDemo.vue

@@ -22,14 +22,7 @@
           </button>
         </div>
 
-        <PreviewSlider
+        <PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="50" :step="1" />
-          title="Spin Duration (s)"
-          v-model="spinDuration"
-          :min="1"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/TextAnimations/CurvedLoopDemo.vue

@@ -30,7 +30,6 @@
           :min="0"
           :max="10"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -40,7 +39,6 @@
           :max="400"
           :step="10"
           value-unit="px"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch

src/demo/TextAnimations/DecryptedTextDemo.vue

@@ -57,24 +57,9 @@
 
         <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
 
-        <PreviewSlider
+        <PreviewSlider title="Speed" v-model="speed" :min="10" :max="200" :step="10" value-unit="ms" />
-          title="Speed"
-          v-model="speed"
-          :min="10"
-          :max="200"
-          :step="10"
-          value-unit="ms"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Iterations" v-model="maxIterations" :min="1" :max="50" :step="1" />
-          title="Iterations"
-          v-model="maxIterations"
-          :min="1"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
         <PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions" />
 

src/demo/TextAnimations/FallingTextDemo.vue

@@ -20,14 +20,7 @@
       <Customize>
         <PreviewSelect title="Animation Trigger" v-model="trigger" :options="triggerOptions" />
 
-        <PreviewSlider
+        <PreviewSlider title="Gravity" v-model="gravity" :min="0.1" :max="2" :step="0.01" />
-          title="Gravity"
-          v-model="gravity"
-          :min="0.1"
-          :max="2"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
 
         <PreviewSlider
           title="Mouse Constraint Stiffness"
@@ -35,7 +28,6 @@
           :min="0.1"
           :max="2"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 
@@ -68,7 +60,7 @@ import FallingText from '../../content/TextAnimations/FallingText/FallingText.vu
 import { fallingText } from '@/constants/code/TextAnimations/fallingTextCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const gravity = ref(0.56);
 const mouseConstraintStiffness = ref(0.9);

src/demo/TextAnimations/FuzzyTextDemo.vue

@@ -33,7 +33,6 @@
           :min="0"
           :max="1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -42,7 +41,6 @@
           :min="0"
           :max="2"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch

src/demo/TextAnimations/SplitTextDemo.vue

@@ -24,32 +24,11 @@
       <Customize>
         <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
 
-        <PreviewSlider
+        <PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
-          title="Stagger Delay (ms)"
-          v-model="delay"
-          :min="10"
-          :max="500"
-          :step="10"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
-          title="Duration (s)"
-          v-model="duration"
-          :min="0.1"
-          :max="3"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/TextAnimations/TextTrailDemo.vue

@@ -14,43 +14,15 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Noise Factor" v-model="noiseFactor" :min="1" :max="25" :step="1" />
-          title="Noise Factor"
-          v-model="noiseFactor"
-          :min="1"
-          :max="25"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Noise Scale" v-model="noiseScale" :min="0" :max="100" :step="1" />
-          title="Noise Scale"
-          v-model="noiseScale"
-          :min="0"
-          :max="100"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Font Weight" v-model="fontWeight" :min="100" :max="900" :step="100" />
-          title="Font Weight"
-          v-model="fontWeight"
-          :min="100"
-          :max="900"
-          :step="100"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Alpha Persist Factor" v-model="alphaPersistFactor" :min="0.5" :max="0.95" :step="0.01" />
-          title="Alpha Persist Factor"
-          v-model="alphaPersistFactor"
-          :min="0.5"
-          :max="0.95"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Animate Color" v-model="animateColor" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -82,7 +54,7 @@ import TextTrail from '../../content/TextAnimations/TextTrail/TextTrail.vue';
 import { textTrail } from '@/constants/code/TextAnimations/textTrailCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const noiseFactor = ref(1);
 const noiseScale = ref(5);

src/demo/TextAnimations/TrueFocusDemo.vue

@@ -12,15 +12,7 @@
 
         <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
 
-        <PreviewSlider
+        <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
-          title="Blur Amount"
-          v-model="blurAmount"
-          :min="0"
-          :max="15"
-          :step="0.5"
-          value-unit="px"
-          @update:model-value="forceRerender"
-        />
 
         <PreviewSlider
           title="Animation Duration"
@@ -30,7 +22,6 @@
           :step="0.1"
           value-unit="s"
           :disabled="!manualMode"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -41,7 +32,6 @@
           :step="0.5"
           value-unit="s"
           :disabled="manualMode"
-          @update:model-value="forceRerender"
         />
       </Customize>