From 3d9828fa5ba93d9965992fcd6c44573be55e5a7e Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 2 May 2022 21:32:52 +0200
Subject: [PATCH] add readonly mode for slider property editor

---
 .../components/umbrangeslider.directive.js    | 22 ++++++++++++++++++-
 .../views/propertyeditors/slider/slider.html  | 10 +++++----
 2 files changed, 27 insertions(+), 5 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 262f70f62b..3f43c402b8 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
@@ -78,7 +78,7 @@ For extra details about options and events take a look here: https://refreshless
         }
     };
 
-    function UmbRangeSliderController($element, $timeout, $scope, assetsService) {
+    function UmbRangeSliderController($element, $timeout, $scope, assetsService, $attrs) {
 
         const ctrl = this;
         let sliderInstance = null;
@@ -96,6 +96,20 @@ For extra details about options and events take a look here: https://refreshless
 
         };
 
+        $attrs.$observe('readonly', (value) => {
+            ctrl.readonly = value !== undefined;
+
+            if (!sliderInstance) {
+                return;
+            }
+
+            if (ctrl.readonly) {
+                sliderInstance.setAttribute('disabled', true);
+            } else {
+                sliderInstance.removeAttribute('disabled');
+            }
+        });
+
         function grabElementAndRun() {
             $timeout(function () {
                 const element = $element.find('.umb-range-slider')[0];
@@ -133,6 +147,12 @@ For extra details about options and events take a look here: https://refreshless
                 sliderInstance.noUiSlider.set(ctrl.ngModel);
             }
 
+            if (ctrl.readonly) {
+                sliderInstance.setAttribute('disabled', true);
+            } else {
+                sliderInstance.removeAttribute('disabled');
+            }
+
             // destroy the slider instance when the dom element is removed
             $(element).on('$destroy', function () {
                 sliderInstance.noUiSlider.off();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html
index 567280b306..084a4e9bf5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html
@@ -2,10 +2,12 @@
 
     <ng-form name="modelValueForm">
         <div style="padding-top: 50px; padding-bottom: 40px;">
-            <umb-range-slider ng-model="sliderValue"
-                              options="sliderOptions"
-                              on-setup="setup(slider)"
-                              on-change="change(values)">
+            <umb-range-slider 
+                ng-model="sliderValue"
+                options="sliderOptions"
+                on-setup="setup(slider)"
+                on-change="change(values)"
+                ng-attr-readonly="{{ readonly || undefined }}">
             </umb-range-slider>
         </div>
         <input type="hidden" name="modelValue" ng-model="model.value" />