fix range component bindings when eval to same subscriber

frontend/src/lib/components/apps/components/helpers/InputValue.svelte

@@ -169,24 +169,30 @@
 		} else if (lastInput?.type == 'eval') {
 			value = await evalExpr(lastInput as EvalAppInput)
 		} else if (lastInput?.type == 'evalv2') {
+			const skey = `${id}-${key}-${rowContext ? $rowContext.index : 0}-${
+				iterContext ? $iterContext.index : 0
+			}`
 			const input = lastInput as EvalV2AppInput
 			for (const c of input.connections ?? []) {
 				const previousValueKey = `${c.componentId}-${c.id}`
 				$worldStore?.connect<any>(
 					c,
 					onEvalChange(previousValueKey),
-					`${id}-${key}`,
+					skey,
 					previousConnectedValues[previousValueKey]
 				)
 			}
 		} else if (lastInput?.type == 'templatev2') {
 			const input = lastInput as TemplateV2Input
+			const skey = `${id}-${key}-${rowContext ? $rowContext.index : 0}-${
+				iterContext ? $iterContext.index : 0
+			}`
 			for (const c of input.connections ?? []) {
 				const previousValueKey = `${c.componentId}-${c.id}`
 				$worldStore?.connect<any>(
 					c,
 					onTemplateChange(previousValueKey),
-					`${id}-${key}`,
+					skey,
 					previousConnectedValues[previousValueKey]
 				)
 			}

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import RangeSlider from 'svelte-range-slider-pips'
 	import { twMerge } from 'tailwind-merge'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type {
 		AppViewerContext,
 		ComponentCustomCSS,
@@ -12,8 +12,9 @@
 	} from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+	import { components } from '../../editor/component'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -25,13 +26,21 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let min = 0
-	let max = 42
-	let step = 1
-	let slider: HTMLElement
+	let resolvedConfig = initConfig(
+		components['rangecomponent'].initialData.configuration,
+		configuration
+	)
+
+	let values: [number, number] = [0, 1]
+	$: (resolvedConfig.defaultLow || resolvedConfig.defaultHigh) && handleMin()
+
+	function handleMin() {
+		values = [resolvedConfig?.defaultLow ?? 0, resolvedConfig?.defaultHigh ?? 1]
+	}
+
 	let disabled = false
 
-	let values: [number, number] = [0, 0]
+	let slider: HTMLElement
 
 	let outputs = initOutput($worldStore, id, {
 		result: null as [number, number] | null
@@ -62,12 +71,14 @@
 	}
 </script>
 
-<InputValue {id} input={configuration.step} bind:value={step} />
-<InputValue {id} input={configuration.min} bind:value={min} />
-<InputValue {id} input={configuration.max} bind:value={max} />
-<InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
-<InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />
-<InputValue {id} input={configuration.disabled} bind:value={disabled} />
+{#each Object.keys(components['rangecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
@@ -75,7 +86,7 @@
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1 px-1">
 			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-				{+min}
+				{+(resolvedConfig.min ?? 0)}
 			</span>
 			<div
 				class="grow"
@@ -86,16 +97,16 @@
 				<RangeSlider
 					bind:slider
 					bind:values
-					{step}
-					min={!min ? 0 : +min}
-					max={!max ? 1 : +max}
+					step={resolvedConfig.step}
+					min={resolvedConfig.min == undefined ? 0 : +resolvedConfig.min}
+					max={resolvedConfig.max == undefined ? 1 : +resolvedConfig.max}
 					range
 					{disabled}
 				/>
 				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
 			</div>
 			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-				{+max}
+				{+(resolvedConfig.max ?? 1)}
 			</span>
 		</div>
 		<div class="flex justify-between px-1">