From 5df189d306be89a80b14e6bee9e9df2c31f7f589 Mon Sep 17 00:00:00 2001
From: Craig Schardt <crschardt@fastem.com>
Date: Sun, 22 Dec 2024 23:25:29 -0600
Subject: [PATCH] Improve slider text input fields (#1654)

This PR changes the text input fields to allow a user to type in a value and press enter (or click away) before the UI registers the updated value. It makes text input behave in a more expected manner.  The spin buttons are no longer shown for the text box. Instead, there are up and down buttons on either side of the slider.

The only thing that I can't figure out is a way to make the up and down buttons continuously increment (decrement) the value if you click and hold. I'm not sure that this is required, but if someone wants to propose a solution, please add it to this PR.
---
 .../src/components/common/pv-slider.vue       | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/photon-client/src/components/common/pv-slider.vue b/photon-client/src/components/common/pv-slider.vue
index 21a5374c6..86e9f8f56 100644
--- a/photon-client/src/components/common/pv-slider.vue
+++ b/photon-client/src/components/common/pv-slider.vue
@@ -47,7 +47,7 @@ const localValue = computed({
 <template>
   <div>
     <v-row dense align="center">
-      <v-col :cols="12 - sliderCols">
+      <v-col :cols="12 - sliderCols - 1">
         <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col :cols="sliderCols">
@@ -61,24 +61,30 @@ const localValue = computed({
           color="accent"
           :disabled="disabled"
           :step="step"
-        >
-          <template #append>
-            <v-text-field
-              v-model="localValue"
-              dark
-              color="accent"
-              :max="max"
-              :min="min"
-              :disabled="disabled"
-              class="mt-0 pt-0"
-              hide-details
-              single-line
-              type="number"
-              style="width: 50px"
-              :step="step"
-            />
-          </template>
-        </v-slider>
+          append-icon="mdi-menu-right"
+          prepend-icon="mdi-menu-left"
+          @click:append="localValue += step"
+          @click:prepend="localValue -= step"
+        />
+      </v-col>
+      <v-col :cols="1">
+        <v-text-field
+          :value="localValue"
+          dark
+          color="accent"
+          :max="max"
+          :min="min"
+          :disabled="disabled"
+          class="mt-0 pt-0"
+          hide-details
+          single-line
+          type="number"
+          style="width: 45px"
+          :step="step"
+          hide-spin-buttons="true"
+          @keyup.enter="localValue = $event.target.value"
+          @blur="localValue = $event.target.value"
+        />
       </v-col>
     </v-row>
   </div>