update Slider

src/components/Slider.vue

@@ -1,34 +1,42 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
-
-const emit = defineEmits(['size-change']);
-const size = ref(100);
-const slider = ref(null);
-
-// watchers
-watch(size, (value) => {
-  if (value == null) return;
-  emit('size-change', value);
+import { ref, watch, computed, onMounted } from "vue";
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 60,
+  },
 });
+const emit = defineEmits(["size-change"]);
+
+const slider = ref(null);
+const innerSize = ref(props.size);
+
+// watch
+watch(
+  () => innerSize.value,
+  (value) => {
+    emit("size-change", value);
+  }
+);
 
 // handlers
 function keydownHandler(e) {
-  if (e.shiftKey && e.key === 'L') {
+  if (e.shiftKey && e.key === "L") {
     if (slider.value) {
-      slider.value.classList.toggle('show');
+      slider.value.classList.toggle("show");
     }
   }
 }
 
 // hooks
 onMounted(() => {
-  document.addEventListener('keydown', keydownHandler);
+  document.addEventListener("keydown", keydownHandler);
 });
 </script>
 
 <template>
   <div ref="slider" class="slider">
-    <input type="range" min="0" max="100" v-model="size" />
+    <input type="range" min="0" max="100" v-model="innerSize" />
   </div>
 </template>