Adjustment of telemetry data slider (#13092)

* Set specific width of container to avoid slider flickering when browser add scrollbar due the telemetry data description

* Round value to nearest integer when slider use smooth behaviour

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

@@ -68,7 +68,6 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f
       });
 
       pips.forEach(function (pip) {
-
         pip.addEventListener('click', function () {
           const value = pip.getAttribute('data-value');
           consentSlider.noUiSlider.set(value);
@@ -88,7 +87,8 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f
   };
 
   function onChangeConsent(values) {
-    const result = Number(values[0]) - 1;
+    const result = Math.round(Number(values[0]) - 1);
+
     $scope.$apply(() => {
       setTelemetryLevelAndDescription(result);
     });

src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.controller.js

@@ -1,11 +1,11 @@
-(function () {
+(function () {
   "use strict";
 
   function AnalyticsController($q, analyticResource, localizationService, notificationsService) {
 
     let sliderRef = null;
 
-    var vm = this;
+    const vm = this;
     vm.getConsentLevel = getConsentLevel;
     vm.getAllConsentLevels = getAllConsentLevels;
     vm.saveConsentLevel = saveConsentLevel;
@@ -61,6 +61,7 @@
       }
 
     });
+
     function setup(slider) {
       sliderRef = slider;
     }
@@ -70,11 +71,13 @@
         vm.consentLevel = response;
       })
     }
+
     function getAllConsentLevels(){
       return analyticResource.getAllConsentLevels().then(function (response) {
         vm.consentLevels = response;
       })
     }
+
     function saveConsentLevel(){
       analyticResource.saveConsentLevel(vm.sliderVal);
       localizationService.localize("analytics_analyticsLevelSavedSuccess").then(function(value) {
@@ -83,14 +86,14 @@
     }
 
     function sliderChange(values) {
-      const result = Number(values[0]);
-      vm.sliderVal = vm.consentLevels[result - 1];
+      const result = Math.round(Number(values[0]) - 1);
+      vm.sliderVal = vm.consentLevels[result];
     }
 
     function calculateStartPositionForSlider(){
       let startPosition = vm.consentLevels.indexOf(vm.consentLevel) + 1;
-      if(startPosition === 0){
-        return 2;// Default start value
+      if (startPosition === 0) {
+         return 2;// Default start value
       }
       return startPosition;
     }

src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.html

@@ -13,7 +13,7 @@
           <br>
           <br>We <b>WILL NOT</b> collect any personal data such as content, code, user information, and all data will be fully anonymized.
         </localize>
-        <div ng-if="!vm.loading" style="padding-left: 12px;padding-top: 50px; padding-bottom: 50px; width: 25%">
+        <div ng-if="!vm.loading" style="padding-left: 12px; padding-top: 50px; padding-bottom: 50px; width: 280px;">
           <umb-range-slider
             ng-model="vm.val"
             on-setup="vm.setup(slider)"