Sync frontend state to backend

src/lib/widgets/ComboWidget.svelte

@@ -9,18 +9,23 @@
  let option: any;
 
  $: if(item) {
-     option = get(item.value);
-     itemValue = item.value
+     if (!itemValue)
+         itemValue = item.value;
+     if (!option)
+         option = get(item.value);
  };
+
+ $: if (option && itemValue) {
+     $itemValue = option.value
+ }
 </script>
 
 <div class="wrapper">
-    {#if item}
+    {#if item && $itemValue}
         <label>
             <BlockTitle show_label={true}>{item.widget.name}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:justValue={$itemValue}
                 bind:items={item.widget.options.values}
                 disabled={item.widget.options.values.length === 0}
                 clearable={false}

src/lib/widgets/RangeWidget.svelte

@@ -1,22 +1,35 @@
 <script lang="ts">
  import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
  import { Range } from "@gradio/form";
+ import { get } from "svelte/store";
  export let item: WidgetUIState | null = null;
  let itemValue: WidgetUIStateStore | null = null;
- $: if (item) { itemValue = item.value; }
+ let option: number | null = null;
+
+ $: if (item && !option) {
+     if (!itemValue)
+         itemValue = item.value;
+     option = get(item.value)
+ }
+
+ function onRelease(e: Event) {
+     if (itemValue && option) {
+         $itemValue = option
+     }
+ }
 </script>
 
 <div class="wrapper">
-    {#if item && itemValue}
+    {#if item && option}
         <Range
-            bind:value={$itemValue}
+            bind:value={option}
             minimum={item.widget.options.min}
             maximum={item.widget.options.max}
             step={item.widget.options.step}
             label={item.widget.name}
             show_label={true}
+            on:release={onRelease}
             on:change
-            on:release
         />
     {/if}
 </div>