Sharing variables between multiple Veutify components

Dashboard 2.0
1

Hi,

I am trying to create an interface where you can change two setpoints (low & high) for a thermostat application. The issue here is that the model-values of the range slider do not change with the respective values of their textfields. The goal is to have both model-values of the range slider and text fields actively change when the other is changed. I’ve achieved this previously with single sliders and textfield components, but for some reason can’t get to work this to work with a range slider.

Additionally, for some reason the “track-fill-color” only renders green when I adjust the slider thumbs. Ideally they would render immediately without having to change the ranges. Any ideas how I could achieve this?

Thanks for bearing with my novice coding!

<v-range-slider
									hide-details
									:max="90"
									:min="20"
									:step="1"
									:model-value="msg?.payload?.dualsetpoint"
									thumb-size="14"
									thumb-color="black"
									track-color="grey"
									track-fill-color="green"
									track-size="4"
									thumb-label="always"
									direction="vertical"
>
				<template v-slot:prepend>
					<v-icon icon="mdi-fire" color="#ff0000" size="xxx-large"></v-icon>
								<v-text-field
								hide-details
								single-line
								:model-value="msg?.payload?.dualsetpoint[0]"
								type="number"
								variant="outlined"
								density="compact"
								style="width: 70px"
								></v-text-field>
				</template>
				<template v-slot:append>
					<v-icon icon="mdi-snowflake" color="#0065ff" size="xxx-large"></v-icon>
								<v-text-field
								hide-details
								single-line
								:model-value="msg?.payload?.dualsetpoint[1]"
								type="number"
								variant="outlined"
								style="width: 70px"
								density="compact"
								></v-text-field>
				</template>
</v-range-slider>
2

Update: Upon further review it appears that the model values for multiple Vuetify components do not change. Below, I use a text-field Veutify component to display a differential value, which is adjustable by the user via the text-field input and sent as msg.payload.differential to nodered whenever the component is clicked. However instead of this behavior, it just sends whatever initial value the template node received under msg.payload.differential. It also does not send ANY message if I try to use @update:modelValue= instead of @click:control

Am I missing something? Any ideas? Thanks

<v-text-field

	:model-value="msg?.payload?.differential"
	type="number"
    variant="outlined"
	density="compact"
	style="width: 30px"
	@click:control="send({ differential: msg?.payload?.differential })">

</v-text-field>