From 02df8aa9252fb2ea45b9580f6515cfd2eadf3a02 Mon Sep 17 00:00:00 2001
From: Matt <matthew.morley.ca@gmail.com>
Date: Mon, 8 Jan 2024 09:27:54 -0500
Subject: [PATCH] Bound check sliders in web UI (#1134)

* Bound check sliders

* Update pv-range-slider.vue

---------

Co-authored-by: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
---
 .../src/components/common/pv-range-slider.vue     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/photon-client/src/components/common/pv-range-slider.vue b/photon-client/src/components/common/pv-range-slider.vue
index fb23ac947..cffdce426 100644
--- a/photon-client/src/components/common/pv-range-slider.vue
+++ b/photon-client/src/components/common/pv-range-slider.vue
@@ -40,12 +40,21 @@ const localValue = computed<[number, number]>({
   }
 });
 
-const changeFromSlot = (v: number, i: number) => {
+const changeFromSlot = (v: string, i: number) => {
+  // v comes in as a string, not a number, for some reason
+  // if v is undefined, take a guess and set it to 0
+  const val = Math.max(props.min, Math.min(parseFloat(v) || 0, props.max));
+
   // localValue.value must be replaced for a reactive change to take place
   const temp = localValue.value;
-  temp[i] = v;
+  temp[i] = val;
   localValue.value = temp;
 };
+
+const checkNumberRange = (v: string): boolean => {
+  const val: number = parseFloat(v);
+  return isFinite(val) && val >= props.min && val <= props.max;
+};
 </script>
 
 <template>
@@ -79,6 +88,7 @@ const changeFromSlot = (v: number, i: number) => {
               :max="max"
               :min="min"
               :step="step"
+              :rules="[checkNumberRange]"
               type="number"
               style="width: 60px"
               @input="(v) => changeFromSlot(v, 0)"
@@ -95,6 +105,7 @@ const changeFromSlot = (v: number, i: number) => {
               :max="max"
               :min="min"
               :step="step"
+              :rules="[checkNumberRange]"
               type="number"
               style="width: 60px"
               @input="(v) => changeFromSlot(v, 1)"