From 09daabe7f5054c5fc2c3415eba9295b6b2b106de Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 24 Mar 2026 10:26:37 +0100
Subject: [PATCH 1/2] Add padding to slider - prevent overflow when label at
 100%

---
 .../koala/source/src/components/RangeSliderStandard.vue          | 1 +
 1 file changed, 1 insertion(+)

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 1a1dde3d26..746dd722ac 100644
--- a/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/RangeSliderStandard.vue
@@ -68,5 +68,6 @@ const maxChanged = computed(() =>
 }
 :deep(.q-range) {
   padding-bottom: 24px;
+  padding-right: 8px;
 }
 </style>

From 317d3358ba244988ac6a116f67951dccc95862dd Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 24 Mar 2026 11:03:13 +0100
Subject: [PATCH 2/2] Use native Quasar props in place of CSS

---
 .../src/components/RangeSliderStandard.vue     | 18 +++---------------
 1 file changed, 3 insertions(+), 15 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 746dd722ac..57f3451e71 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">{{ title }}</div>
-    <div class="row items-center justify-between q-ml-sm">
+    <div class="row items-center q-mx-sm">
       <q-range
         v-model="delayedValue"
         :min="props.min"
@@ -12,8 +12,9 @@
         :right-label-color="maxChanged ? 'negative' : 'primary'"
         label
         label-always
+        switch-label-side
         color="primary"
-        class="col"
+        class="col q-pb-xl"
         track-size="0.5em"
         thumb-size="1.7em"
         @touchstart.stop
@@ -58,16 +59,3 @@ const maxChanged = computed(() =>
   delayedValue.value.max !== props.modelValue.max
 )
 </script>
-<style scoped lang="scss">
-:deep(.q-slider__pin) {
-  top: 100%;
-  transform: scaleY(-1);
-}
-:deep(.q-slider__text-container) {
-  transform: scaleY(-1) !important;
-}
-:deep(.q-range) {
-  padding-bottom: 24px;
-  padding-right: 8px;
-}
-</style>