From 1024b26cec726caa5bf644d82e317545de61e9fe Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 19 Aug 2022 15:03:56 +0200
Subject: [PATCH] Fix umb-range-slider merging overlapping tooltips (#12777)

* Formatting CSS using Less syntax

* Fix merging overlapping tooltips from noUiSlider v15.5.0+
---
 .../components/umbrangeslider.directive.js    | 26 +++---
 .../src/less/components/umb-range-slider.less | 92 ++++++++++---------
 2 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
index 233d5c2f7d..0c46ada020 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
@@ -249,15 +249,15 @@ For extra details about options and events take a look here: https://refreshless
             var isVertical = slider.noUiSlider.options.orientation === 'vertical';
             var tooltips = slider.noUiSlider.getTooltips();
             var origins = slider.noUiSlider.getOrigins();
-
+            
             // Move tooltips into the origin element. The default stylesheet handles this.
-          if(tooltips && tooltips.length !== 0){
-            tooltips.forEach(function (tooltip, index) {
-              if (tooltip) {
-                origins[index].appendChild(tooltip);
-              }
-            });
-          }
+            if(tooltips && tooltips.length !== 0){
+              tooltips.forEach(function (tooltip, index) {
+                if (tooltip) {
+                  origins[index].appendChild(tooltip);
+                }
+              });
+            }
 
             slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
 
@@ -293,17 +293,17 @@ For extra details about options and events take a look here: https://refreshless
 
                     for (var j = 0; j < handlesInPool; j++) {
                         var handleNumber = pool[j];
-
+                        
                         if (j === handlesInPool - 1) {
                             var offset = 0;
-
+                            
                             poolPositions[poolIndex].forEach(function (value) {
-                                offset += 1000 - 10 * value;
+                                offset += 1000 - value;
                             });
-
+                            
                             var direction = isVertical ? 'bottom' : 'right';
                             var last = isRtl ? 0 : handlesInPool - 1;
-                            var lastOffset = 1000 - 10 * poolPositions[poolIndex][last];
+                            var lastOffset = 1000 - poolPositions[poolIndex][last];
                             offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;
 
                             // Filter to unique values
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
index 57273a6a4e..44d69d3856 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
@@ -1,56 +1,58 @@
+.umb-range-slider {
 
+    &.noUi-target {
+        background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%);
+        box-shadow: none;
+        border-radius: 20px;
+        height: 8px;
+        border: 1px solid @inputBorder;
 
-.umb-range-slider.noUi-target {
-    background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%);
-    box-shadow: none;
-    border-radius: 20px;
-    height: 8px;
-    border: 1px solid @inputBorder;
-    &:focus, &:focus-within {
-        border-color: @inputBorderFocus;
+        &:focus, &:focus-within {
+            border-color: @inputBorderFocus;
+        }
     }
-}
-.umb-range-slider .noUi-connects {
-    cursor: pointer;
-    height: 20px;
-    top: -6px;
-}
-.umb-range-slider .noUi-connect {
-    background-color: @purple-washed;
-    border: 1px solid @purple-l3;
-}
 
-.umb-range-slider .noUi-tooltip {
-    padding: 2px 6px;
-}
-.umb-range-slider .noUi-handle {
-    cursor: grab;
-    border-radius: 100px;
-    border: none;
-    box-shadow: none;
-    width: 20px !important;
-    height: 20px !important;
-    right: -10px !important; // half the handle width
-    background-color: @blueExtraDark;
-}
-.umb-range-slider .noUi-horizontal .noUi-handle {
-    top: -7px;
-}
+    .noUi-connects {
+        cursor: pointer;
+        height: 20px;
+        top: -6px;
+    }
 
-.umb-range-slider .noUi-handle::before {
-    display: none;
-}
+    .noUi-connect {
+        background-color: @purple-washed;
+        border: 1px solid @purple-l3;
+    }
 
-.umb-range-slider .noUi-handle::after {
-    display: none;
-}
+    .noUi-tooltip {
+        padding: 2px 6px;
+    }
 
-.umb-range-slider .noUi-marker-large.noUi-marker-horizontal {
-    height: 10px;
-}
+    .noUi-handle {
+        cursor: grab;
+        border-radius: 100px;
+        border: none;
+        box-shadow: none;
+        width: 20px !important;
+        height: 20px !important;
+        right: -10px !important; // half the handle width
+        background-color: @blueExtraDark;
 
-.umb-range-slider .noUi-marker.noUi-marker-horizontal {
-    width: 1px;
+        &::before, &::after {
+            display: none;
+        }
+    }
+
+    .noUi-horizontal .noUi-handle {
+        top: -7px;
+    }
+
+    .noUi-marker-large.noUi-marker-horizontal {
+        height: 10px;
+    }
+
+    .noUi-marker.noUi-marker-horizontal {
+        width: 1px;
+    }
 }
 
 .noUi-value {