From acf7ddb8152ca416d2fe014bc55e123deb16c8ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Mar 2024 10:43:20 +0100
Subject: [PATCH] make inputs red when invalid

---
 .../input-number-range/input-number-range.element.ts     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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 7eba3fe003..4b4b170dfc 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,5 +1,5 @@
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
-import { html, customElement, property, state, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, type PropertyValueMap, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 function getNumberOrUndefined(value: string) {
@@ -93,7 +93,6 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 	render() {
 		return html`<uui-input
 				type="number"
-				required
 				.value=${this._minValue}
 				@input=${this._onMinInput}
 				label=${this.minLabel}></uui-input>
@@ -105,6 +104,12 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 				label=${this.maxLabel}
 				placeholder="&infin;"></uui-input>`;
 	}
+
+	static styles = css`
+		:host(:invalid) uui-input {
+			border-color: var(--uui-color-danger);
+		}
+	`;
 }
 
 export default UmbInputNumberRangeElement;