From 932c4d51948ebcb2885fbdd8767703f56754e1d5 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 17 Oct 2024 14:46:19 +0200
Subject: [PATCH] fix(ui): update slider value if `min/max` change. WF-4

---
 .../components/core/base/BaseInputSlider.vue  | 28 ++++++++++++++++++-
 .../core/base/BaseInputSliderRange.vue        | 20 ++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/components/core/base/BaseInputSlider.vue b/src/ui/src/components/core/base/BaseInputSlider.vue
index 2cc029a99..bd6d16d29 100644
--- a/src/ui/src/components/core/base/BaseInputSlider.vue
+++ b/src/ui/src/components/core/base/BaseInputSlider.vue
@@ -30,7 +30,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, ComponentInstance, toRef } from "vue";
+import {
+	computed,
+	PropType,
+	ref,
+	ComponentInstance,
+	toRef,
+	watch,
+	ComputedRef,
+} from "vue";
 import BaseInputRangeThumb from "./BaseInputSliderThumb.vue";
 import BaseInputSliderLayout from "./BaseInputSliderLayout.vue";
 import { useBoundingClientRect } from "@/composables/useBoundingClientRect";
@@ -61,4 +69,22 @@ const progress = computed(() => {
 });
 
 const sliderBoundingRect = useBoundingClientRect(slider);
+
+// update the `value` if the `min` or `max` change and `value` is outside of the range
+watch(
+	() => props.min,
+	() => {
+		if (typeof model.value === "number" && model.value < props.min)
+			model.value = props.min;
+	},
+	{ immediate: true },
+);
+watch(
+	() => props.max,
+	() => {
+		if (typeof model.value === "number" && model.value > props.max)
+			model.value = props.max;
+	},
+	{ immediate: true },
+);
 </script>
diff --git a/src/ui/src/components/core/base/BaseInputSliderRange.vue b/src/ui/src/components/core/base/BaseInputSliderRange.vue
index 73c68fad7..738787c95 100644
--- a/src/ui/src/components/core/base/BaseInputSliderRange.vue
+++ b/src/ui/src/components/core/base/BaseInputSliderRange.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentInstance, computed, PropType, ref, toRef } from "vue";
+import { ComponentInstance, computed, PropType, ref, toRef, watch } from "vue";
 import BaseInputRangeThumb from "./BaseInputSliderThumb.vue";
 import { useBoundingClientRect } from "@/composables/useBoundingClientRect";
 import BaseInputSliderLayout from "./BaseInputSliderLayout.vue";
@@ -99,4 +99,22 @@ const progress = computed(() => {
 });
 
 const sliderBoundingRect = useBoundingClientRect(slider);
+
+// update the `value` if the `min` or `max` change and `value` is outside of the range
+watch(
+	() => props.min,
+	() => {
+		if (!model.value.some((v) => v < props.min)) return;
+		model.value = model.value.map((v) => (v < props.min ? props.min : v));
+	},
+	{ immediate: true },
+);
+watch(
+	() => props.max,
+	() => {
+		if (!model.value.some((v) => v > props.max)) return;
+		model.value = model.value.map((v) => (v > props.max ? props.max : v));
+	},
+	{ immediate: true },
+);
 </script>