feat: implement state and components for text config

2026-02-06 02:26:14 +05:00
parent a063a2d752
commit 5244de7cc0
11 changed files with 128 additions and 68 deletions
@@ -1,5 +1,19 @@
-<input type="range" id="fontSize" min="12" max="48" value="18" class="slider" />
-<span class="value-display" id="fontSizeValue">18</span>
+<script lang="ts">
+  import type { ChangeEventHandler } from "svelte/elements";
+
+  interface Props {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+  }
+
+  let { value = $bindable(), min = 0, max = 100, step = 1, onchange = () => {} }: Props = $props();
+</script>
+
+<input type="range" {min} {max} {step} bind:value class="slider" {onchange} />
+<span class="value-display">{value}</span>

 <style>
  .slider {