From 808d75f729449bad0552d8be23df51c7403be76e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 7 Apr 2026 13:54:37 +0200
Subject: [PATCH] Convert range slider label to dynamic text

---
 .../src/components/BatterySettingsDialog.vue  |  2 +-
 .../src/components/RangeSliderStandard.vue    | 46 +++++++++++--------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
index 9252ca681e..50bff707ce 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -28,7 +28,7 @@
         <BatteryModeButtons />
           <RangeSliderStandard  v-if="batteryMode === 'min_soc_bat_mode'" class="q-pt-md"
             v-model="batteryRange"
-            title="SoC-Grenzen des Speichers % :"
+            title="SoC-Grenzen des Speichers:"
             :min="0"
             :max="100"
             :step="1"
diff --git a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
index 57f3451e71..b58205fd37 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -1,6 +1,17 @@
 <template>
   <div>
-    <div class="text-subtitle2">{{ title }}</div>
+    <div class="row items-center justify-between text-subtitle2">
+      <div>{{ title }}</div>
+      <div class="text-right">
+        <span :class="{ 'text-negative': minChanged }">
+          {{ delayedValue.min }}%
+        </span>
+        –
+        <span :class="{ 'text-negative': maxChanged }">
+          {{ delayedValue.max }}%
+        </span>
+      </div>
+    </div>
     <div class="row items-center q-mx-sm">
       <q-range
         v-model="delayedValue"
@@ -8,11 +19,6 @@
         :max="props.max"
         :step="props.step"
         :markers="props.markers"
-        :left-label-color="minChanged ? 'negative' : 'primary'"
-        :right-label-color="maxChanged ? 'negative' : 'primary'"
-        label
-        label-always
-        switch-label-side
         color="primary"
         class="col q-pb-xl"
         track-size="0.5em"
@@ -31,19 +37,19 @@ import { RangeValue } from '../stores/mqtt-store-model';
 
 const props = withDefaults(
   defineProps<{
-    title?: string
-    modelValue: RangeValue
-    min: number
-    max: number
-    step?: number
-    markers?: boolean | number
+    title?: string;
+    modelValue: RangeValue;
+    min: number;
+    max: number;
+    step?: number;
+    markers?: boolean | number;
   }>(),
   {
     title: '',
     step: 1,
     markers: false,
-  }
-)
+  },
+);
 
 const emit = defineEmits<{
   'update:model-value': [value: RangeValue];
@@ -51,11 +57,11 @@ const emit = defineEmits<{
 
 const { delayedValue } = useDelayModel<RangeValue>(props, emit);
 
-const minChanged = computed(() =>
-  delayedValue.value.min !== props.modelValue.min
-)
+const minChanged = computed(
+  () => delayedValue.value.min !== props.modelValue.min,
+);
 
-const maxChanged = computed(() =>
-  delayedValue.value.max !== props.modelValue.max
-)
+const maxChanged = computed(
+  () => delayedValue.value.max !== props.modelValue.max,
+);
 </script>