diff --git a/app/src/lib/components/input/VerticalSlider.svelte b/app/src/lib/components/input/VerticalSlider.svelte
index a4e2e75..3ba3486 100644
--- a/app/src/lib/components/input/VerticalSlider.svelte
+++ b/app/src/lib/components/input/VerticalSlider.svelte
@@ -1,37 +1,34 @@
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
+    interface Props {
+        min?: number;
+        max?: number;
+        step?: number;
+        value?: any;
+    }
 
-  const bubble = createBubbler();
-  interface Props {
-    min?: number;
-    max?: number;
-    step?: number;
-    value?: any;
-  }
-
-  let {
-    min = 0,
-    max = 100,
-    step = 1,
-    value = $bindable((max - min) / 2)
-  }: Props = $props();
+    let {
+        min = 0,
+        max = 100,
+        step = 1,
+        value = $bindable((max - min) / 2),
+        ...rest
+    }: Props = $props();
 </script>
-  
+
 <input
     type="range"
     style="writing-mode: vertical-lr; direction: rtl"
     class="cursor-pointer"
-    min={min}
-    max={max}
-    step={step}
+    {min}
+    {max}
+    {step}
     bind:value
-    oninput={bubble('input')}
-    onchange={bubble('change')}
+    {...rest}
 />
 
 <style>
-input[type=range]::-webkit-slider-runnable-track {
-  background: oklch(var(--p)/1);
-  border-radius: var(--rounded-box, 1rem);
-} 
-</style>
\ No newline at end of file
+    input[type='range']::-webkit-slider-runnable-track {
+        background: oklch(var(--p) / 1);
+        border-radius: var(--rounded-box, 1rem);
+    }
+</style>
diff --git a/app/src/lib/components/widget/Selector.svelte b/app/src/lib/components/widget/Selector.svelte
index 3fcbdd7..6f21957 100644
--- a/app/src/lib/components/widget/Selector.svelte
+++ b/app/src/lib/components/widget/Selector.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
+    interface Props {
+        options?: string[];
+        selectedOption?: string;
+        change: () => void;
+        [key: string]: any;
+    }
 
-	const bubble = createBubbler();
-	interface Props {
-		options?: string[];
-		selectedOption?: string;
-		[key: string]: any
-	}
-
-	let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
+    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
 </script>
 
 <select
-	bind:value={selectedOption}
-	onchange={bubble('change')}
-	class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
+    bind:value={selectedOption}
+    {...rest}
+    class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
 >
-	{#each options as option}
-		<option value={option}>{option}</option>
-	{/each}
+    {#each options as option}
+        <option value={option}>{option}</option>
+    {/each}
 </select>