Merge pull request #1447 from umbraco/bugfix/property-editor/slider

Bugfix: Slider value

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

@@ -1,7 +1,7 @@
-import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISliderEvent } from '@umbraco-cms/backoffice/external/uui';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UUISliderEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-slider')
 export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
@@ -15,10 +15,10 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 	step = 1;
 
 	@property({ type: Number })
-	initVal1 = 0;
+	valueLow = 0;
 
 	@property({ type: Number })
-	initVal2 = 0;
+	valueHigh = 0;
 
 	@property({ type: Boolean, attribute: 'enable-range' })
 	enableRange = false;
@@ -34,8 +34,7 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	render() {
-		if (this.enableRange) return this.#renderRangeSlider();
-		else return this.#renderSlider();
+		return this.enableRange ? this.#renderRangeSlider() : this.#renderSlider();
 	}
 
 	#renderSlider() {
@@ -43,7 +42,7 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 			.min="${this.min}"
 			.max="${this.max}"
 			.step="${this.step}"
-			.value="${this.initVal1.toString()}"
+			.value="${this.valueLow.toString()}"
 			@change="${this.#onChange}"></uui-slider>`;
 	}
 	#renderRangeSlider() {
@@ -51,8 +50,7 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 			.min="${this.min}"
 			.max="${this.max}"
 			.step="${this.step}"
-			.valueLow="${this.initVal1}"
-			.valueHigh="${this.initVal2}"
+			.value="${this.valueLow},${this.valueHigh}"
 			@change="${this.#onChange}"></uui-range-slider>`;
 	}
 }

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

@@ -15,7 +15,7 @@ export const Overview: Story = {
 		min: 0,
 		max: 100,
 		step: 10,
-		initVal1: 20,
+		valueLow: 20,
 	},
 };
 
@@ -24,8 +24,8 @@ export const WithRange: Story = {
 		min: 0,
 		max: 100,
 		step: 10,
-		initVal1: 20,
-		initVal2: 80,
+		valueLow: 20,
+		valueHigh: 80,
 		enableRange: true,
 	},
 };
@@ -35,7 +35,7 @@ export const WithSmallStep: Story = {
 		min: 0,
 		max: 5,
 		step: 1,
-		initVal1: 4,
+		valueLow: 4,
 	},
 };
 
@@ -44,6 +44,6 @@ export const WithLargeMinMax: Story = {
 		min: 0,
 		max: 100,
 		step: 1,
-		initVal1: 86,
+		valueLow: 86,
 	},
 };

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

@@ -1,8 +1,9 @@
 import type { UmbInputSliderElement } from '../../../components/input-slider/input-slider.element.js';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
 /**
  * @element umb-property-editor-ui-slider
@@ -10,12 +11,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 @customElement('umb-property-editor-ui-slider')
 export class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: Object })
-	value:
-		| {
-				to?: number;
-				from?: number;
-		  }
-		| undefined = undefined;
+	value: { to?: number; from?: number } | undefined = undefined;
 
 	@state()
 	_enableRange?: boolean;
@@ -44,29 +40,26 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
 		this._max = config?.getValueByAlias('maxVal');
 	}
 
-	#getValueObject(val: string) {
-		if (!val.includes(',')) return { from: parseInt(val), to: parseInt(val) };
-		const from = val.slice(0, val.indexOf(','));
-		const to = val.slice(val.indexOf(',') + 1);
-		return { from: parseInt(from), to: parseInt(to) };
+	#getValueObject(value: string) {
+		const [from, to] = value.split(',').map(Number);
+		return { from, to: to ?? from };
 	}
 
-	private _onChange(event: CustomEvent) {
-		const eventVal = this.#getValueObject((event.target as UmbInputSliderElement).value as string);
-		this.value = eventVal;
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+	#onChange(event: CustomEvent) {
+		const element = event.target as UmbInputSliderElement;
+		this.value = this.#getValueObject(element.value as string);
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	// TODO: This does not seem to take current value into account?
 	render() {
 		return html`<umb-input-slider
-			.initVal1="${this._initVal1 ?? 0}"
-			.initVal2="${this._initVal2 ?? 0}"
-			.step="${this._step ?? 0}"
-			.min="${this._min ?? 0}"
-			.max="${this._max ?? 0}"
+			.valueLow=${this.value?.from ?? this._initVal1 ?? 0}
+			.valueHigh=${this.value?.to ?? this._initVal2 ?? 0}
+			.step=${this._step ?? 0}
+			.min=${this._min ?? 0}
+			.max=${this._max ?? 0}
 			?enable-range=${this._enableRange}
-			@change="${this._onChange}"></umb-input-slider>`;
+			@change=${this.#onChange}></umb-input-slider>`;
 	}
 }