temp

src/lib/widgets/RangeWidget.svelte

@@ -1,35 +1,38 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
+ import type { ComfySliderNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
  import { Range } from "@gradio/form";
- import { get } from "svelte/store";
- export let item: WidgetUIState | null = null;
- let itemValue: WidgetUIStateStore | null = null;
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfySliderNode | null = null;
+ let nodeValue: Writable<number> | null = null;
  let option: number | null = null;
 
- $: if (item) {
-     itemValue = item.value;
+ $: if(widget) {
+     node = widget.node
+     nodeValue = node.value;
      updateOption(); // don't react on option
- }
+ };
 
  function updateOption() {
-     option = get(itemValue);
+     option = get(nodeValue);
  }
 
  function onRelease(e: Event) {
-     if (itemValue && option) {
-         $itemValue = option
+     if (nodeValue && option) {
+         $nodeValue = option
      }
  }
 </script>
 
 <div class="wrapper gr-range">
-    {#if item !== null && option !== null}
+    {#if node !== null && option !== null}
         <Range
             bind:value={option}
-            minimum={item.widget.options.min}
-            maximum={item.widget.options.max}
-            step={item.widget.options.step}
-            label={item.widget.name}
+            minimum={node.properties.min}
+            maximum={node.properties.max}
+            step={node.properties.step}
+            label={widget.attrs.title}
             show_label={true}
             on:release={onRelease}
             on:change