Makes active pip text darker to contrast with non-active pips (#12807)

* Makes active pip text darker to contrast with non-active pips

* Adds active class to slider component and updates functionality to accommodate multiple pips

* Update umbrangeslider.directive.js

* Adds click handler,accommodates decimal values and moves styles to single file

src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js

@@ -139,6 +139,8 @@ For extra details about options and events take a look here: https://refreshless
             });
 
             setUpCallbacks();
+            setUpActivePipsHandling();
+            addPipClickHandler();
 
             // Refresh the scope
             $scope.$applyAsync();
@@ -299,7 +301,28 @@ For extra details about options and events take a look here: https://refreshless
                 });
             });
         }
-
+      function setUpActivePipsHandling() {
+        let activePip = [null, null];
+        sliderInstance.noUiSlider.on('update', function (values,handle) {
+          if(activePip[handle]){
+            activePip[handle].classList.remove("noUi-value-active");
+          }
+          sliderInstance.querySelectorAll('.noUi-value').forEach(pip => {
+            if (Number(values[handle]) === Number(pip.getAttribute('data-value'))) {
+              activePip[handle] = pip;
+            }
+          });
+          activePip[handle].classList.add("noUi-value-active");
+        });
+      }
+      function addPipClickHandler(){
+          sliderInstance.querySelectorAll('.noUi-value').forEach(function(pip){
+            pip.addEventListener('click', function () {
+              const value = pip.getAttribute('data-value');
+              sliderInstance.noUiSlider.set(value);
+            });
+          });
+      }
     }
 
     angular.module('umbraco.directives').component('umbRangeSlider', umbRangeSlider);

src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js

@@ -58,6 +58,19 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f
 
       const pips = consentSlider.querySelectorAll('.noUi-value');
 
+      let activePip = [null, null];
+      consentSlider.noUiSlider.on('update', function (values,handle) {
+        if(activePip[handle]){
+          activePip[handle].classList.remove("noUi-value-active");
+        }
+        consentSlider.querySelectorAll('.noUi-value').forEach(pip => {
+          if (Number(values[handle]) === Number(pip.getAttribute('data-value'))) {
+            activePip[handle] = pip;
+          }
+        });
+        activePip[handle].classList.add("noUi-value-active");
+      });
+
       $(consentSlider).on('$destroy', function () {
         consentSlider.noUiSlider.off();
       });

src/Umbraco.Web.UI.Client/src/installer/steps/user.html

@@ -47,7 +47,7 @@
             <label class="control-label">Telemetry</label>
             <div class="controls">
               <div id="consentSliderWrapper">
-                <div id="consentSlider"></div>
+                <div id="consentSlider" class="umb-range-slider"></div>
 
                 <umb-tooltip ng-if="consentTooltip.show" event="consentTooltip.event">
                   <div ng-bind-html="consentTooltip.description"></div>

src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less

@@ -52,3 +52,10 @@
 .umb-range-slider .noUi-marker.noUi-marker-horizontal {
     width: 1px;
 }
+
+.noUi-value {
+  cursor: pointer;
+  &-active{
+    color: @black;
+  }
+}

src/Umbraco.Web.UI.Client/src/less/installer.less

@@ -18,6 +18,7 @@
 // Umbraco Components
 @import "components/umb-loader.less";
 @import "components/tooltip/umb-tooltip.less";
+@import "components/umb-range-slider.less";
 
 
 [ng\:cloak],
@@ -285,45 +286,3 @@ select {
   margin-bottom: 40px;
 }
 
-#consentSlider {
-  .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;
-    }
-  }
-
-  .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
-    top: -1px;
-    background-color: @blueExtraDark;
-  }
-
-  .noUi-handle::before {
-    display: none;
-  }
-
-  .noUi-handle::after {
-    display: none;
-  }
-
-  .noUi-value {
-    cursor: pointer;
-  }
-
-  .noUi-pips-horizontal {
-    height: 40px;
-  }
-}