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..7bcb47f06e 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -68,7 +68,9 @@
     </q-card-section>
     <q-separator inset class="q-mt-sm" />
     <q-card-section>
-      <SliderDouble :current-value="soc" :readonly="true" limit-mode="none" />
+      <SliderDouble :current-value="soc" :readonly="true" limit-mode="none">
+        <template #value> {{ soc }}% </template>
+      </SliderDouble>
     </q-card-section>
   </q-card>
   <BatterySettingsDialog :battery-id="props.batteryId" ref="dialog" />
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index e8e163c8dd..b619748e78 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -37,15 +37,19 @@
       <div class="col">
         <div>{{ props.limitMode == 'amount' ? 'Geladen' : 'Ladestand' }}</div>
         <div>
-          {{
-            props.limitMode === 'amount'
-              ? formatEnergy(props.currentValue)
-              : !props.vehicleSocType
-                ? 'Kein SoC-Modul konfiguriert'
-                : props.currentValue + '%'
-          }}
+          <slot name="value">
+            {{
+              props.limitMode === 'amount'
+                ? formatEnergy(props.currentValue)
+                : !props.vehicleSocType
+                  ? 'Kein SoC-Modul konfiguriert'
+                  : props.currentValue + '%'
+            }}
+          </slot>
           <q-icon
-            v-if="props.vehicleSocType === 'manual' && props.limitMode !== 'amount'"
+            v-if="
+              props.vehicleSocType === 'manual' && props.limitMode !== 'amount'
+            "
             name="edit"
             size="xs"
             class="q-ml-xs cursor-pointer"
@@ -54,7 +58,11 @@
             <q-tooltip>Ladestand eingeben</q-tooltip>
           </q-icon>
           <q-icon
-            v-else-if="props.vehicleSocType && props.vehicleSocType !== 'manual' && props.limitMode !== 'amount'"
+            v-else-if="
+              props.vehicleSocType &&
+              props.vehicleSocType !== 'manual' &&
+              props.limitMode !== 'amount'
+            "
             name="refresh"
             size="xs"
             class="q-ml-xs cursor-pointer"