From 4d963a7b91ba1ea71e7f2a9499bc695b032ede7f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 17 Mar 2026 08:57:34 +0100
Subject: [PATCH 01/11] Add range slider for PV charging - Battery SoC range

---
 .../src/components/BatterySettingsDialog.vue  | 21 +++++++++++
 .../source/src/composables/useBatteryModes.ts |  4 +--
 .../source/src/stores/mqtt-store-model.ts     |  5 +++
 .../koala/source/src/stores/mqtt-store.ts     | 35 +++++++++++++++++++
 4 files changed, 63 insertions(+), 2 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 483b4783e0..8005a48b6d 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -5,6 +5,7 @@
     :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
     <q-card>
+      {{ batteryRange }}
       <q-card-section>
         <div class="row no-wrap">
           <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
@@ -18,6 +19,17 @@
         <div class="text-subtitle2">Überschuss primär für:</div>
         <BatteryModeButtons />
       </q-card-section>
+      <q-card-section v-if="batteryMode === 'min_soc_bat_mode'">
+          <div class="text-subtitle2">SoC-Bereich des Speichers:</div>
+          <q-range
+            v-model="batteryRange"
+            :min="0"
+            :max="100"
+            :step="1"
+            :markers="10"
+            label
+          />
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>
@@ -48,4 +60,13 @@ const name = computed(() => {
 defineExpose({
   open: () => (isOpen.value = true),
 });
+
+const batteryMode = computed(() => mqttStore.batteryMode().value);
+
+const batteryRange = computed({
+  get: () => mqttStore.batteryChargePriorityRange,
+  set: (value) => {
+    mqttStore.batteryChargePriorityRange = value;
+  },
+});
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
index 27591cbdf4..12d260b412 100644
--- a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
+++ b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
@@ -16,10 +16,10 @@ export const useBatteryModes = () => {
     },
     {
       value: 'min_soc_bat_mode',
-      label: 'Mindest-SoC',
+      label: 'Nach SoC des Speichers',
       color: 'primary',
       icon: 'battery_4_bar',
-      tooltip: 'Mindest-SoC des Speichers',
+      tooltip: 'Nach SoC des Speichers',
     },
   ];
 
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 9aaa806cd4..2020c6da8b 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -224,3 +224,8 @@ export interface CounterConfiguration {
   id: number;
   configuration: object;
 }
+
+export interface BatteryChargePriorityRange {
+  min: number;
+  max: number;
+}
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 06468262fa..c02fb0e657 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -27,6 +27,7 @@ import type {
   VehicleChargeTarget,
   CalculatedSocState,
   SystemCommandEvent,
+  BatteryChargePriorityRange,
 } from './mqtt-store-model';
 
 export const useMqttStore = defineStore('mqtt', () => {
@@ -1921,6 +1922,39 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+  /**
+   * Get or set the battery charge priority SoC range for PV charging
+   * @returns BatteryChargePriorityRange
+   */
+  const batteryChargePriorityRange = computed<BatteryChargePriorityRange>({
+    get() {
+      const minSoc = getValue.value(
+        'openWB/general/chargemode_config/pv_charging/min_bat_soc',
+      ) as number | undefined;
+      const maxSoc = getValue.value(
+        'openWB/general/chargemode_config/pv_charging/max_bat_soc',
+      ) as number | undefined;
+      return {
+        min: minSoc ?? 0,
+        max: maxSoc ?? 100,
+      };
+    },
+    set(newRange: BatteryChargePriorityRange) {
+      updateTopic(
+        'openWB/general/chargemode_config/pv_charging/min_bat_soc',
+        newRange.min,
+        undefined,
+        true,
+      );
+      updateTopic(
+        'openWB/general/chargemode_config/pv_charging/max_bat_soc',
+        newRange.max,
+        undefined,
+        true,
+      );
+    },
+  });
+
   /**
    * Get or set the charge point connected vehicle eco energy limit identified by the charge point id
    * @param chargePointId charge point id
@@ -4055,6 +4089,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryDailyImportedTotal,
     batteryDailyExportedTotal,
     batteryTotalPower,
+    batteryChargePriorityRange,
     batteryMode,
     // Grid data
     getGridId,

From 9d8ad46c152ed328a0ba4a989a1cb9078172d216 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 17 Mar 2026 11:11:05 +0100
Subject: [PATCH 02/11] format tittle and range slider labels

---
 .../src/components/BatterySettingsDialog.vue  | 57 ++++++++++++++-----
 1 file changed, 43 insertions(+), 14 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 8005a48b6d..667fd06030 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -4,14 +4,23 @@
     :maximized="isSmallScreen"
     :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
-    <q-card>
-      {{ batteryRange }}
+    <q-card class="card-width">
       <q-card-section>
+        <!-- {{ batteryRange }} -->
         <div class="row no-wrap">
-          <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
-          <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          <div>
+            <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
+            <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          </div>
           <q-space />
-          <q-btn icon="close" flat round dense v-close-popup />
+          <q-btn
+            icon="close"
+            flat
+            round
+            dense
+            v-close-popup
+            class="close-btn"
+          />
         </div>
       </q-card-section>
       <q-separator />
@@ -20,15 +29,16 @@
         <BatteryModeButtons />
       </q-card-section>
       <q-card-section v-if="batteryMode === 'min_soc_bat_mode'">
-          <div class="text-subtitle2">SoC-Bereich des Speichers:</div>
-          <q-range
-            v-model="batteryRange"
-            :min="0"
-            :max="100"
-            :step="1"
-            :markers="10"
-            label
-          />
+        <div class="text-subtitle2">SoC-Bereich des Speichers % :</div>
+        <q-range
+          v-model="batteryRange"
+          :min="0"
+          :max="100"
+          :step="1"
+          :markers="10"
+          label
+          label-always
+        />
       </q-card-section>
     </q-card>
   </q-dialog>
@@ -70,3 +80,22 @@ const batteryRange = computed({
   },
 });
 </script>
+<style lang="scss" scoped>
+.card-width {
+  max-width: 26em;
+}
+.close-btn {
+  height: 2.5em;
+  width: 2.5em;
+}
+:deep(.q-slider__pin) {
+  top: 100%;
+  transform: scaleY(-1);
+}
+:deep(.q-slider__text-container) {
+  transform: scaleY(-1) !important;
+}
+:deep(.q-range) {
+  padding-bottom: 24px;
+}
+</style>

From 6631da4aae729c85ce33d3e7f0873a8eb81bda3e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 17 Mar 2026 17:43:16 +0100
Subject: [PATCH 03/11] Add child component RangeSliderStandard

---
 .../source/src/components/BatteryCard.vue     |   2 +-
 .../src/components/BatterySettingsDialog.vue  |  38 ++---
 .../src/components/RangeSliderStandard.vue    | 135 ++++++++++++++++++
 3 files changed, 149 insertions(+), 26 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 202d5a9390..74b1861c64 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -36,7 +36,7 @@
         v-if="showSettings"
         class="row q-mt-md justify-between text-subtitle2"
       >
-        <div>Laden mit Überschuss:</div>
+        <div>Ladepriorität:</div>
         <div class="q-ml-sm row items-center">
           <q-icon
             :name="batteryMode.icon"
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 667fd06030..1e68d6b1f8 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -6,7 +6,6 @@
   >
     <q-card class="card-width">
       <q-card-section>
-        <!-- {{ batteryRange }} -->
         <div class="row no-wrap">
           <div>
             <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
@@ -25,20 +24,18 @@
       </q-card-section>
       <q-separator />
       <q-card-section>
-        <div class="text-subtitle2">Überschuss primär für:</div>
+        <div class="text-subtitle2">Ladepriorität:</div>
         <BatteryModeButtons />
-      </q-card-section>
-      <q-card-section v-if="batteryMode === 'min_soc_bat_mode'">
-        <div class="text-subtitle2">SoC-Bereich des Speichers % :</div>
-        <q-range
-          v-model="batteryRange"
-          :min="0"
-          :max="100"
-          :step="1"
-          :markers="10"
-          label
-          label-always
-        />
+        <div v-if="batteryMode === 'min_soc_bat_mode'" class="q-pt-md">
+          <RangeSliderStandard
+            v-model="batteryRange"
+            title="SoC-Grenzen des Speichers % :"
+            :min="0"
+            :max="100"
+            :step="1"
+            :markers="10"
+          />
+        </div>
       </q-card-section>
     </q-card>
   </q-dialog>
@@ -48,6 +45,7 @@
 import { computed, ref } from 'vue';
 import { Screen } from 'quasar';
 import BatteryModeButtons from './BatteryModeButtons.vue';
+import RangeSliderStandard from './RangeSliderStandard.vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
 const isOpen = ref(false);
@@ -82,20 +80,10 @@ const batteryRange = computed({
 </script>
 <style lang="scss" scoped>
 .card-width {
-  max-width: 26em;
+  max-width: 600px;
 }
 .close-btn {
   height: 2.5em;
   width: 2.5em;
 }
-:deep(.q-slider__pin) {
-  top: 100%;
-  transform: scaleY(-1);
-}
-:deep(.q-slider__text-container) {
-  transform: scaleY(-1) !important;
-}
-:deep(.q-range) {
-  padding-bottom: 24px;
-}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
new file mode 100644
index 0000000000..03c81fc1f8
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div class="text-subtitle2">{{ props.title }}</div>
+    <div class="row items-center justify-between q-ml-sm" :class="myClass">
+      <q-range
+        v-model="value"
+        :min="props.min"
+        :max="props.max"
+        :step="props.step"
+        :markers="props.markers"
+        label
+        label-always
+        color="primary"
+        class="col"
+        track-size="0.5em"
+        thumb-size="1.7em"
+        @touchstart.stop
+        @touchmove.stop
+        @touchend.stop
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeUnmount } from 'vue'
+
+defineOptions({
+  name: 'RangeSliderStandard'
+})
+
+interface RangeValue {
+  min: number
+  max: number
+}
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  modelValue: {
+    type: Object as () => RangeValue,
+    required: true
+  },
+  min: {
+    type: Number,
+    required: true
+  },
+  max: {
+    type: Number,
+    required: true
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  markers: {
+    type: [Boolean, Number],
+    default: false
+  },
+})
+
+const emit = defineEmits<{
+  'update:model-value': [value: RangeValue]
+}>()
+
+const tempValue = ref<RangeValue>({ ...props.modelValue })
+const updateTimeout = ref<NodeJS.Timeout | null>(null)
+
+const updatePending = computed(() => {
+  return (
+    tempValue.value.min !== props.modelValue.min ||
+    tempValue.value.max !== props.modelValue.max
+  )
+})
+
+const value = computed({
+  get: () => tempValue.value,
+  set: (newValue: RangeValue) => {
+    if (updateTimeout.value) {
+      clearTimeout(updateTimeout.value)
+    }
+    tempValue.value = { ...newValue }
+  }
+})
+
+watch(
+  value,
+  (newValue) => {
+    if (!updatePending.value) return
+
+    if (updateTimeout.value) {
+      clearTimeout(updateTimeout.value)
+    }
+    updateTimeout.value = setTimeout(() => {
+      emit('update:model-value', { ...newValue })
+    }, 800)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    tempValue.value = { ...newValue }
+  }
+)
+
+onBeforeUnmount(() => {
+  if (updateTimeout.value) {
+    clearTimeout(updateTimeout.value)
+    emit('update:model-value', { ...tempValue.value })
+  }
+})
+
+const myClass = computed(() => {
+  return updatePending.value ? 'pending' : ''
+})
+</script>
+
+<style lang="scss" scoped>
+.pending :deep(.q-slider__text) {
+  color: rgb(159, 22, 22);
+}
+:deep(.q-slider__pin) {
+  top: 100%;
+  transform: scaleY(-1);
+}
+:deep(.q-slider__text-container) {
+  transform: scaleY(-1) !important;
+}
+:deep(.q-range) {
+  padding-bottom: 24px;
+}
+</style>

From dc5875347a86fa5c09bab357b5a6aa049a3342fa Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 18 Mar 2026 16:11:10 +0100
Subject: [PATCH 04/11] make composable for slider debounce delay

---
 .../src/components/RangeSliderStandard.vue    |  76 +++----------
 .../source/src/components/SliderStandard.vue  | 101 +++++-------------
 .../source/src/composables/useDelayModel.ts   |  80 ++++++++++++++
 3 files changed, 120 insertions(+), 137 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts

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 03c81fc1f8..d8f579ec67 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="text-subtitle2">{{ props.title }}</div>
-    <div class="row items-center justify-between q-ml-sm" :class="myClass">
+    <div class="text-subtitle2">{{ title }}</div>
+    <div class="row items-center justify-between q-ml-sm" :class="pendingClass">
       <q-range
         v-model="value"
         :min="props.min"
@@ -22,15 +22,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeUnmount } from 'vue'
-
-defineOptions({
-  name: 'RangeSliderStandard'
-})
+import { computed } from 'vue';
+import { useDelayModel } from '../composables/useDelayModel';
 
 interface RangeValue {
-  min: number
-  max: number
+  min: number;
+  max: number;
 }
 
 const props = defineProps({
@@ -61,66 +58,17 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-  'update:model-value': [value: RangeValue]
-}>()
-
-const tempValue = ref<RangeValue>({ ...props.modelValue })
-const updateTimeout = ref<NodeJS.Timeout | null>(null)
-
-const updatePending = computed(() => {
-  return (
-    tempValue.value.min !== props.modelValue.min ||
-    tempValue.value.max !== props.modelValue.max
-  )
-})
-
-const value = computed({
-  get: () => tempValue.value,
-  set: (newValue: RangeValue) => {
-    if (updateTimeout.value) {
-      clearTimeout(updateTimeout.value)
-    }
-    tempValue.value = { ...newValue }
-  }
-})
+  'update:model-value': [value: RangeValue];
+}>();
 
-watch(
-  value,
-  (newValue) => {
-    if (!updatePending.value) return
+const { value, updatePending } = useDelayModel<RangeValue>(props, emit);
 
-    if (updateTimeout.value) {
-      clearTimeout(updateTimeout.value)
-    }
-    updateTimeout.value = setTimeout(() => {
-      emit('update:model-value', { ...newValue })
-    }, 800)
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    tempValue.value = { ...newValue }
-  }
-)
-
-onBeforeUnmount(() => {
-  if (updateTimeout.value) {
-    clearTimeout(updateTimeout.value)
-    emit('update:model-value', { ...tempValue.value })
-  }
-})
-
-const myClass = computed(() => {
-  return updatePending.value ? 'pending' : ''
-})
+const pendingClass = computed(() => (updatePending.value ? 'pending' : ''));
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .pending :deep(.q-slider__text) {
-  color: rgb(159, 22, 22);
+  color: rgb(159, 22, 22) !important;
 }
 :deep(.q-slider__pin) {
   top: 100%;
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index 94e418666b..0a065bdae6 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -1,11 +1,9 @@
 <template>
   <div>
-    <div>
-      <div class="text-subtitle2">{{ props.title }}</div>
-    </div>
+    <div class="text-subtitle2">{{ title }}</div>
     <div class="row items-center justify-between q-ml-sm">
       <q-slider
-        v-model="value"
+        v-model="sliderValue"
         :min="props.discreteValues ? 0 : props.min"
         :max="
           props.discreteValues ? props.discreteValues.length - 1 : props.max
@@ -19,9 +17,11 @@
         @touchstart.stop
         @touchmove.stop
         @touchend.stop
-        @change="updateValue"
       />
-      <div class="q-ml-sm no-wrap" :class="['col-2', 'text-right', myClass]">
+      <div
+        class="q-ml-sm no-wrap"
+        :class="['col-2', 'text-right', pendingClass]"
+      >
         {{ displayValue }} {{ displayUnit }}
       </div>
     </div>
@@ -29,7 +29,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeUnmount } from 'vue';
+import { computed } from 'vue';
+import { useDelayModel } from '../composables/useDelayModel';
 
 defineOptions({
   name: 'SliderStandard',
@@ -42,6 +43,7 @@ const props = defineProps({
   },
   modelValue: {
     type: Number,
+    required: true,
   },
   max: {
     type: Number,
@@ -68,7 +70,7 @@ const props = defineProps({
     default: -1,
   },
   discreteValues: {
-    type: Array as () => number[],
+    type: Array as () => number[] | undefined,
     default: undefined,
   },
   color: {
@@ -93,102 +95,55 @@ const emit = defineEmits<{
   'update:model-value': [value: number];
 }>();
 
-const tempValue = ref<number | undefined>(props.modelValue);
-const updateTimeout = ref<NodeJS.Timeout | null>(null);
+const { value, updatePending } = useDelayModel<number>(props, emit);
 
-const updatePending = computed(() => {
-  return tempValue.value !== props.modelValue;
-});
-const value = computed({
+const sliderValue = computed({
   get: () => {
     if (props.discreteValues) {
-      const index = props.discreteValues.indexOf(
-        tempValue.value ?? props.discreteValues[0],
-      );
+      const index = props.discreteValues.indexOf(value.value);
       return index >= 0 ? index : 0;
     }
-    return tempValue.value;
+    return value.value;
   },
   set: (newValue: number) => {
-    if (updateTimeout.value) {
-      clearTimeout(updateTimeout.value);
-    }
     if (props.discreteValues) {
-      tempValue.value = props.discreteValues[newValue];
+      value.value = props.discreteValues[newValue];
     } else {
-      tempValue.value = newValue;
+      value.value = newValue;
     }
   },
 });
 
-const updateValue = (newValue: number) => {
-  if (updatePending.value) {
-    if (updateTimeout.value) {
-      clearTimeout(updateTimeout.value);
-    }
-    updateTimeout.value = setTimeout(() => {
-      emit(
-        'update:model-value',
-        props.discreteValues ? props.discreteValues[newValue] : newValue,
-      );
-    }, 2000);
-  }
-};
+const currentValue = computed(() => {
+  return props.discreteValues && sliderValue.value !== undefined
+    ? (props.discreteValues[sliderValue.value] ?? props.discreteValues[0])
+    : value.value;
+});
 
 const displayValue = computed(() => {
-  const currentValue =
-    props.discreteValues && value.value !== undefined
-      ? props.discreteValues[value.value]
-      : value.value;
-
   if (
-    currentValue === props.offValueLeft ||
-    currentValue === props.offValueRight
+    currentValue.value === props.offValueLeft ||
+    currentValue.value === props.offValueRight
   ) {
     return 'Aus';
   }
-  return currentValue;
+  return currentValue.value;
 });
 
 const displayUnit = computed(() => {
-  const currentValue =
-    props.discreteValues && value.value !== undefined
-      ? props.discreteValues[value.value]
-      : value.value;
-
   if (
-    currentValue === props.offValueLeft ||
-    currentValue === props.offValueRight
+    currentValue.value === props.offValueLeft ||
+    currentValue.value === props.offValueRight
   ) {
     return '';
   }
   return props.unit;
 });
 
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    tempValue.value = newValue;
-  },
-);
-
-onBeforeUnmount(() => {
-  if (updateTimeout.value) {
-    clearTimeout(updateTimeout.value);
-    const currentValue = value.value !== undefined ? value.value : 0;
-    emit(
-      'update:model-value',
-      props.discreteValues ? props.discreteValues[currentValue] : currentValue,
-    );
-  }
-});
-
-const myClass = computed(() => {
-  return updatePending.value ? 'pending' : '';
-});
+const pendingClass = computed(() => (updatePending.value ? 'pending' : ''));
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .pending {
   color: $red;
 }
diff --git a/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts b/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts
new file mode 100644
index 0000000000..d002df9d86
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts
@@ -0,0 +1,80 @@
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
+
+function clone<T>(value: T): T {
+  if (typeof value === 'object' && value !== null) {
+    return { ...value }
+  }
+  return value
+}
+
+type Comparable = number | Record<string, unknown>
+function isEqual<T extends Comparable>(a: T, b: T): boolean {
+  if (typeof a === 'object' && a !== null) {
+    const objA = a as Record<string, unknown>
+    const objB = b as Record<string, unknown>
+
+    return Object.keys(objA).every(
+      (key) => objA[key] === objB[key]
+    )
+  }
+  return a === b
+}
+
+export function useDelayModel<T>(
+  props: { modelValue: T },
+  emit: (event: 'update:model-value', value: T) => void,
+  delay = 2000
+) {
+  const tempValue = ref<T>(clone(props.modelValue))
+
+  const updateTimeout = ref<NodeJS.Timeout | null>(null)
+
+  const updatePending = computed(() => {
+    return !isEqual(tempValue.value, props.modelValue)
+  })
+
+  const value = computed({
+    get: () => tempValue.value,
+    set: (newValue: T) => {
+      if (updateTimeout.value) {
+        clearTimeout(updateTimeout.value)
+      }
+      tempValue.value = clone(newValue)
+    },
+  })
+
+  watch(
+    value,
+    (newValue) => {
+      if (!updatePending.value) return
+
+      if (updateTimeout.value) {
+        clearTimeout(updateTimeout.value)
+      }
+
+      updateTimeout.value = setTimeout(() => {
+        emit('update:model-value', clone(newValue))
+      }, delay)
+    },
+    { deep: true }
+  )
+
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      tempValue.value = clone(newValue)
+    }
+  )
+
+  onBeforeUnmount(() => {
+    if (updateTimeout.value) {
+      clearTimeout(updateTimeout.value)
+      emit('update:model-value', clone(tempValue.value))
+    }
+  })
+
+  return {
+    value,
+    updatePending,
+  }
+}

From 1c96c99a0fd3e046bb74e6945ec85d7e834fa943 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 18 Mar 2026 16:27:16 +0100
Subject: [PATCH 05/11] convert props to TypeScript defineProps withDefaults

---
 .../src/components/RangeSliderStandard.vue    | 41 ++++-----
 .../source/src/components/SliderStandard.vue  | 83 +++++++------------
 2 files changed, 44 insertions(+), 80 deletions(-)

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 d8f579ec67..6ee417ef6c 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -30,32 +30,21 @@ interface RangeValue {
   max: number;
 }
 
-const props = defineProps({
-  title: {
-    type: String,
-    default: ''
-  },
-  modelValue: {
-    type: Object as () => RangeValue,
-    required: true
-  },
-  min: {
-    type: Number,
-    required: true
-  },
-  max: {
-    type: Number,
-    required: true
-  },
-  step: {
-    type: Number,
-    default: 1
-  },
-  markers: {
-    type: [Boolean, Number],
-    default: false
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    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];
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index 0a065bdae6..25b1d3fd07 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -36,60 +36,35 @@ defineOptions({
   name: 'SliderStandard',
 });
 
-const props = defineProps({
-  title: {
-    type: String,
-    default: 'title',
-  },
-  modelValue: {
-    type: Number,
-    required: true,
-  },
-  max: {
-    type: Number,
-    required: true,
-  },
-  min: {
-    type: Number,
-    required: true,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  unit: {
-    type: String,
-    default: '',
-  },
-  offValueRight: {
-    type: Number,
-    default: 105,
-  },
-  offValueLeft: {
-    type: Number,
-    default: -1,
-  },
-  discreteValues: {
-    type: Array as () => number[] | undefined,
-    default: undefined,
-  },
-  color: {
-    type: String,
-    default: 'primary',
-  },
-  trackSize: {
-    type: String,
-    default: '0.5em',
-  },
-  thumbSize: {
-    type: String,
-    default: '1.5em',
-  },
-  thumbColor: {
-    type: String,
-    default: 'primary',
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    modelValue: number
+    max: number
+    min: number
+    step?: number
+    unit?: string
+    offValueRight?: number
+    offValueLeft?: number
+    discreteValues?: number[]
+    color?: string
+    trackSize?: string
+    thumbSize?: string
+    thumbColor?: string
+  }>(),
+  {
+    title: 'title',
+    step: 1,
+    unit: '',
+    offValueRight: 105,
+    offValueLeft: -1,
+    discreteValues: undefined,
+    color: 'primary',
+    trackSize: '0.5em',
+    thumbSize: '1.5em',
+    thumbColor: 'primary',
+  }
+)
 
 const emit = defineEmits<{
   'update:model-value': [value: number];

From f3c24a03cfc63a92b23cdf31393c681a853dd5b8 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 18 Mar 2026 16:58:35 +0100
Subject: [PATCH 06/11] Format charge priority indicator for longer text

---
 .../web_themes/koala/source/src/components/BatteryCard.vue     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 74b1861c64..26a386bfe1 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -37,11 +37,10 @@
         class="row q-mt-md justify-between text-subtitle2"
       >
         <div>Ladepriorität:</div>
-        <div class="q-ml-sm row items-center">
+        <div class="row items-center">
           <q-icon
             :name="batteryMode.icon"
             size="sm"
-            class="q-mr-sm"
             color="primary"
           />
           <div>

From 3db1bb2802b8e82e9826649b9e1d834c587d6db9 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 19 Mar 2026 08:41:13 +0100
Subject: [PATCH 07/11] Remove unnecessary div

---
 .../koala/source/src/components/BatterySettingsDialog.vue     | 4 +---
 1 file changed, 1 insertion(+), 3 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 1e68d6b1f8..9252ca681e 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -26,8 +26,7 @@
       <q-card-section>
         <div class="text-subtitle2">Ladepriorität:</div>
         <BatteryModeButtons />
-        <div v-if="batteryMode === 'min_soc_bat_mode'" class="q-pt-md">
-          <RangeSliderStandard
+          <RangeSliderStandard  v-if="batteryMode === 'min_soc_bat_mode'" class="q-pt-md"
             v-model="batteryRange"
             title="SoC-Grenzen des Speichers % :"
             :min="0"
@@ -35,7 +34,6 @@
             :step="1"
             :markers="10"
           />
-        </div>
       </q-card-section>
     </q-card>
   </q-dialog>

From ea7790d6852c7a1946bc5a8edf70f516e797f05d Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 19 Mar 2026 10:28:39 +0100
Subject: [PATCH 08/11] Rename delayed value for readability

---
 .../source/src/components/RangeSliderStandard.vue    |  4 ++--
 .../koala/source/src/components/SliderStandard.vue   | 12 ++++++------
 .../koala/source/src/composables/useDelayModel.ts    |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

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 6ee417ef6c..c91aa8ef49 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -3,7 +3,7 @@
     <div class="text-subtitle2">{{ title }}</div>
     <div class="row items-center justify-between q-ml-sm" :class="pendingClass">
       <q-range
-        v-model="value"
+        v-model="delayedValue"
         :min="props.min"
         :max="props.max"
         :step="props.step"
@@ -50,7 +50,7 @@ const emit = defineEmits<{
   'update:model-value': [value: RangeValue];
 }>();
 
-const { value, updatePending } = useDelayModel<RangeValue>(props, emit);
+const { delayedValue, updatePending } = useDelayModel<RangeValue>(props, emit);
 
 const pendingClass = computed(() => (updatePending.value ? 'pending' : ''));
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index 25b1d3fd07..0cceeb92c4 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -70,21 +70,21 @@ const emit = defineEmits<{
   'update:model-value': [value: number];
 }>();
 
-const { value, updatePending } = useDelayModel<number>(props, emit);
+const { delayedValue, updatePending } = useDelayModel<number>(props, emit);
 
 const sliderValue = computed({
   get: () => {
     if (props.discreteValues) {
-      const index = props.discreteValues.indexOf(value.value);
+      const index = props.discreteValues.indexOf(delayedValue.value);
       return index >= 0 ? index : 0;
     }
-    return value.value;
+    return delayedValue.value;
   },
   set: (newValue: number) => {
     if (props.discreteValues) {
-      value.value = props.discreteValues[newValue];
+      delayedValue.value = props.discreteValues[newValue];
     } else {
-      value.value = newValue;
+      delayedValue.value = newValue;
     }
   },
 });
@@ -92,7 +92,7 @@ const sliderValue = computed({
 const currentValue = computed(() => {
   return props.discreteValues && sliderValue.value !== undefined
     ? (props.discreteValues[sliderValue.value] ?? props.discreteValues[0])
-    : value.value;
+    : delayedValue.value;
 });
 
 const displayValue = computed(() => {
diff --git a/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts b/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts
index d002df9d86..f3cfb3dec5 100644
--- a/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts
+++ b/packages/modules/web_themes/koala/source/src/composables/useDelayModel.ts
@@ -33,7 +33,7 @@ export function useDelayModel<T>(
     return !isEqual(tempValue.value, props.modelValue)
   })
 
-  const value = computed({
+  const delayedValue = computed({
     get: () => tempValue.value,
     set: (newValue: T) => {
       if (updateTimeout.value) {
@@ -44,7 +44,7 @@ export function useDelayModel<T>(
   })
 
   watch(
-    value,
+    delayedValue,
     (newValue) => {
       if (!updatePending.value) return
 
@@ -74,7 +74,7 @@ export function useDelayModel<T>(
   })
 
   return {
-    value,
+    delayedValue,
     updatePending,
   }
 }

From f84b2239eaa7f3aeb5527065a72b53b6f235f4c0 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 19 Mar 2026 10:44:07 +0100
Subject: [PATCH 09/11] Rename value range interface

---
 .../koala/source/src/components/RangeSliderStandard.vue   | 6 +-----
 .../koala/source/src/stores/mqtt-store-model.ts           | 2 +-
 .../web_themes/koala/source/src/stores/mqtt-store.ts      | 8 ++++----
 3 files changed, 6 insertions(+), 10 deletions(-)

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 c91aa8ef49..2a15c8d0ad 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -24,11 +24,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useDelayModel } from '../composables/useDelayModel';
-
-interface RangeValue {
-  min: number;
-  max: number;
-}
+import { RangeValue } from '../stores/mqtt-store-model';
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 2020c6da8b..015d773507 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -225,7 +225,7 @@ export interface CounterConfiguration {
   configuration: object;
 }
 
-export interface BatteryChargePriorityRange {
+export interface RangeValue {
   min: number;
   max: number;
 }
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index c02fb0e657..4418e66ed3 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -27,7 +27,7 @@ import type {
   VehicleChargeTarget,
   CalculatedSocState,
   SystemCommandEvent,
-  BatteryChargePriorityRange,
+  RangeValue,
 } from './mqtt-store-model';
 
 export const useMqttStore = defineStore('mqtt', () => {
@@ -1924,9 +1924,9 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * Get or set the battery charge priority SoC range for PV charging
-   * @returns BatteryChargePriorityRange
+   * @returns RangeValue
    */
-  const batteryChargePriorityRange = computed<BatteryChargePriorityRange>({
+  const batteryChargePriorityRange = computed<RangeValue>({
     get() {
       const minSoc = getValue.value(
         'openWB/general/chargemode_config/pv_charging/min_bat_soc',
@@ -1939,7 +1939,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         max: maxSoc ?? 100,
       };
     },
-    set(newRange: BatteryChargePriorityRange) {
+    set(newRange: RangeValue) {
       updateTopic(
         'openWB/general/chargemode_config/pv_charging/min_bat_soc',
         newRange.min,

From 0c7b49b62f94d556317ba5d9ae623f1da32be31f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 19 Mar 2026 12:02:18 +0100
Subject: [PATCH 10/11] Color text labels on slider when value is pending

---
 .../koala/source/src/components/RangeSliderStandard.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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 2a15c8d0ad..572a51a35e 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -52,8 +52,11 @@ const pendingClass = computed(() => (updatePending.value ? 'pending' : ''));
 </script>
 
 <style scoped lang="scss">
-.pending :deep(.q-slider__text) {
-  color: rgb(159, 22, 22) !important;
+.pending :deep(.q-slider__text-container) {
+  background-color: $red;
+}
+.pending :deep(.q-slider__pin) {
+  color: $red;
 }
 :deep(.q-slider__pin) {
   top: 100%;

From 570676eca6fd589e7f3da5502c07917b16f71813 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 19 Mar 2026 13:59:37 +0100
Subject: [PATCH 11/11] Use quasar prop for range-slider label

---
 .../src/components/RangeSliderStandard.vue    | 21 ++++++++++---------
 .../source/src/components/SliderStandard.vue  |  3 +--
 2 files changed, 12 insertions(+), 12 deletions(-)

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 572a51a35e..1a1dde3d26 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -1,13 +1,15 @@
 <template>
   <div>
     <div class="text-subtitle2">{{ title }}</div>
-    <div class="row items-center justify-between q-ml-sm" :class="pendingClass">
+    <div class="row items-center justify-between q-ml-sm">
       <q-range
         v-model="delayedValue"
         :min="props.min"
         :max="props.max"
         :step="props.step"
         :markers="props.markers"
+        :left-label-color="minChanged ? 'negative' : 'primary'"
+        :right-label-color="maxChanged ? 'negative' : 'primary'"
         label
         label-always
         color="primary"
@@ -46,18 +48,17 @@ const emit = defineEmits<{
   'update:model-value': [value: RangeValue];
 }>();
 
-const { delayedValue, updatePending } = useDelayModel<RangeValue>(props, emit);
+const { delayedValue } = useDelayModel<RangeValue>(props, emit);
 
-const pendingClass = computed(() => (updatePending.value ? 'pending' : ''));
-</script>
+const minChanged = computed(() =>
+  delayedValue.value.min !== props.modelValue.min
+)
 
+const maxChanged = computed(() =>
+  delayedValue.value.max !== props.modelValue.max
+)
+</script>
 <style scoped lang="scss">
-.pending :deep(.q-slider__text-container) {
-  background-color: $red;
-}
-.pending :deep(.q-slider__pin) {
-  color: $red;
-}
 :deep(.q-slider__pin) {
   top: 100%;
   transform: scaleY(-1);
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index 0cceeb92c4..7902d31f81 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -117,9 +117,8 @@ const displayUnit = computed(() => {
 
 const pendingClass = computed(() => (updatePending.value ? 'pending' : ''));
 </script>
-
 <style scoped lang="scss">
 .pending {
-  color: $red;
+  color: var(--q-negative);
 }
 </style>