Merge pull request #2220 from umbraco/v14/feature/readonly-slider-property-editor-ui

Feature: Readonly mode for Slider Property Editor UI

src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts

@@ -24,6 +24,15 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, ''
 	@property({ type: Boolean, attribute: 'enable-range' })
 	enableRange = false;
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	protected override getFormElement() {
 		return undefined;
 	}
@@ -45,7 +54,8 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, ''
 				.max=${this.max}
 				.step=${this.step}
 				.value=${this.valueLow.toString()}
-				@change=${this.#onChange}>
+				@change=${this.#onChange}
+				?readonly=${this.readonly}>
 			</uui-slider>
 		`;
 	}
@@ -57,7 +67,8 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, ''
 				.max=${this.max}
 				.step=${this.step}
 				.value="${this.valueLow},${this.valueHigh}"
-				@change=${this.#onChange}>
+				@change=${this.#onChange}
+				?readonly=${this.readonly}>
 			</uui-range-slider>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts

@@ -12,6 +12,7 @@ export const manifests: Array<ManifestTypes> = [
 			propertyEditorSchemaAlias: 'Umbraco.Slider',
 			icon: 'icon-navigation-horizontal',
 			group: 'common',
+			supportsReadOnly: true,
 			settings: {
 				properties: [
 					{

src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts

@@ -15,6 +15,15 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
 	@property({ type: Object })
 	value: UmbSliderValue | undefined;
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@state()
 	_enableRange = false;
 
@@ -82,7 +91,8 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
 				.min=${this._min}
 				.max=${this._max}
 				?enable-range=${this._enableRange}
-				@change=${this.#onChange}>
+				@change=${this.#onChange}
+				?readonly=${this.readonly}>
 			</umb-input-slider>
 		`;
 	}