add readonly mode for slider property editor

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();

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" />