diff --git a/src/003-assets/CSS/general.css b/src/003-assets/CSS/general.css
new file mode 100644
index 0000000000000000000000000000000000000000..f3467c9abe50b08fbfaa5a0fb83f80f058e02fe1
--- /dev/null
+++ b/src/003-assets/CSS/general.css
@@ -0,0 +1,13 @@
+input:invalid{
+	border-color: #900;
+	background-color: rgba(255, 0, 0, 0.25);
+}
+
+input:focus:invalid {
+	outline: none;
+}
+
+input:out-of-range {
+	background-color: rgba(255, 0, 0, 0.25);
+	border: 2px solid #900;
+}
diff --git a/src/js/rulesAssistantOptions.js b/src/js/rulesAssistantOptions.js
index 875593bddae89b648b898e3746faefe64b57e732..43ead43cd73d59ddc0466ac98107e649d45b653b 100644
--- a/src/js/rulesAssistantOptions.js
+++ b/src/js/rulesAssistantOptions.js
@@ -705,7 +705,7 @@ window.rulesAssistantOptions = (function() {
 		 * @param {number} [max=100]
 		 */
 		constructor(prefix, data = [], allowNullValue = true, min = 0, max = 100) {
-			super(prefix, data, allowNullValue, true, true,  min, max);
+			super(prefix, data, allowNullValue, true, true, min, max);
 		}
 
 		createEditor(min, max) {
@@ -741,6 +741,20 @@ window.rulesAssistantOptions = (function() {
 			this._minEditor = makeElem("Min", res, this);
 			this._maxEditor = makeElem("Max", res, this);
 
+			this._minEditor.addEventListener("input", event => {
+				const v = parseInt(this._minEditor.value);
+				if (!Number.isNaN(v)) {
+					this._maxEditor.min = Math.max(this._min, v).toString();
+				}
+			});
+
+			this._maxEditor.addEventListener("input", event => {
+				const v = parseInt(this._maxEditor.value);
+				if (!Number.isNaN(v)) {
+					this._minEditor.max = Math.min(this._max, v).toString();
+				}
+			});
+
 			return res;
 		}