diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts
index 41d300a752..242f3fa852 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts
@@ -1,6 +1,6 @@
import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
@@ -34,6 +34,11 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
return this._minValue;
}
+ @property({ type: Boolean })
+ required = false;
+ @property({ type: String })
+ requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
@state()
private _maxValue?: number;
@@ -90,6 +95,12 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
constructor() {
super();
+ this.addValidator(
+ 'valueMissing',
+ () => this.requiredMessage,
+ () => this.required && (this._minValue == null || this._maxValue == null),
+ );
+
this.addValidator(
'patternMismatch',
() => {
@@ -129,7 +140,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
min=${ifDefined(this.validationRange?.min)}
max=${ifDefined(this.validationRange?.max)}
placeholder=${this._minPlaceholder}
- .value=${this._minValue}
+ ?required=${this.required}
+ .value=${this._minValue?.toString() ?? ''}
@input=${this.#onMinInput}>
–
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts
index aaeeb1a5ae..792276779b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts
@@ -1,6 +1,6 @@
import type { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
@@ -26,9 +26,14 @@ export class UmbPropertyEditorUINumberRangeElement
@state()
private _validationRange?: UmbNumberRangeValueType;
+ @property({ type: Boolean })
+ mandatory = false;
+ @property({ type: String })
+ mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
@property({ type: Object })
public override set value(value: UmbNumberRangeValueType | undefined) {
- super.value = value || { min: undefined, max: undefined };
+ super.value = value;
this._minValue = value?.min;
this._maxValue = value?.max;
}
@@ -42,7 +47,9 @@ export class UmbPropertyEditorUINumberRangeElement
}
#onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {
- this.value = { min: event.target.minValue, max: event.target.maxValue };
+ const min = event.target.minValue;
+ const max = event.target.maxValue;
+ this.value = min == null && max == null ? undefined : { min, max };
this.dispatchEvent(new UmbChangeEvent());
}
@@ -59,6 +66,8 @@ export class UmbPropertyEditorUINumberRangeElement