From ce304fc5ebf4f0ab18c24b82bc7043af43e4d439 Mon Sep 17 00:00:00 2001
From: Azgaar <azgaar.fmg@yandex.com>
Date: Tue, 20 Aug 2024 01:23:05 +0200
Subject: [PATCH] feat: slider-input web component - Brush size

---
 index.css                                   |   1 -
 index.html                                  | 145 ++++----------------
 modules/dynamic/editors/cultures-editor.js  |  25 +---
 modules/dynamic/editors/religions-editor.js |  32 ++---
 modules/dynamic/editors/states-editor.js    |  41 ++----
 modules/ui/biomes-editor.js                 |   4 +-
 modules/ui/heightmap-editor.js              |   8 +-
 modules/ui/hotkeys.js                       |  29 ++--
 modules/ui/provinces-editor.js              |   4 +-
 9 files changed, 69 insertions(+), 220 deletions(-)

diff --git a/index.css b/index.css
index 5dff20f7..bceaf86d 100644
--- a/index.css
+++ b/index.css
@@ -1245,7 +1245,6 @@ i.resetButton:active {
   padding: 0;
   height: 2px;
   background: #d4d4d4;
-  top: -0.35em;
   position: relative;
   appearance: none;
   -webkit-appearance: none;
diff --git a/index.html b/index.html
index a50c3d5d..9ae648d3 100644
--- a/index.html
+++ b/index.html
@@ -4076,72 +4076,24 @@
         </div>
 
         <div id="brushesSliders" style="display: none">
-          <div data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" style="padding-bottom: 1px">
-            <div style="width: 3.2em; display: inline-block"><i>Radius:</i></div>
-            <input
-              id="brushRadius"
-              oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value"
-              type="range"
-              min="1"
-              max="99"
-              value="25"
-              style="width: 13em"
-            />
-            <input
-              id="brushRadiusNumber"
-              oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value"
-              type="number"
-              min="1"
-              max="99"
-              value="25"
-              style="border: 1px solid #d4d4d4"
-            />
+          <div data-tip="Change brush size. Shortcut: + to increase; – to decrease">
+            <slider-input id="heightmapBrushRadius" min="5" max="100" value="25">
+              <div style="width: 3.5em">Radius:</div>
+            </slider-input>
           </div>
 
-          <div data-tip="Set the brush power">
-            <div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
-            <input
-              id="brushPower"
-              oninput="tip('Brush power: '+this.value); brushPowerNumber.value = this.value"
-              type="range"
-              min="1"
-              max="10"
-              value="5"
-              style="width: 13em"
-            />
-            <input
-              id="brushPowerNumber"
-              oninput="tip('Brush power: '+this.value); brushPower.value = this.value"
-              type="number"
-              min="1"
-              max="10"
-              value="5"
-              style="border: 1px solid #d4d4d4"
-            />
+          <div data-tip="Change brush power">
+            <slider-input id="heightmapBrushPower" min="1" max="10" value="5">
+              <div style="width: 3.5em">Power:</div>
+            </slider-input>
           </div>
         </div>
 
         <div id="lineSlider" style="display: none">
-          <div data-tip="Set change power">
-            <div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
-            <input
-              id="linePower"
-              oninput="tip('Line power: '+this.value); linePowerNumber.value = this.value"
-              type="range"
-              min="-100"
-              max="100"
-              value="30"
-              style="width: 13em"
-            />
-            <input
-              id="linePowerNumber"
-              oninput="tip('Line power: '+this.value); linePower.value = this.value"
-              type="number"
-              min="-100"
-              max="100"
-              value="30"
-              style="border: 1px solid #d4d4d4"
-            />
+          <div data-tip="Change tool power. Shortcut: + to increase; – to decrease">
+            <slider-input id="heightmapLinePower" min="-100" max="100" value="30">
+              <div style="width: 3.5em">Power:</div>
+            </slider-input>
           </div>
         </div>
 
@@ -4407,26 +4359,10 @@
             class="icon-brush"
           ></button>
           <div id="biomesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-              >Brush radius:
-              <input
-                id="biomesManuallyBrush"
-                oninput="tip('Brush radius: '+this.value); biomesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="15"
-                style="width: 4em"
-              />
-              <input
-                id="biomesManuallyBrushNumber"
-                oninput="tip('Brush radius: '+this.value); biomesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="15"
-              /> </label
-            ><br />
+            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
+              Brush size:
+              <slider-input id="biomesBrush" min="5" max="100" value="15"></slider-input>
+            </div>
             <button id="biomesManuallyApply" data-tip="Apply current assignment" class="icon-check"></button>
             <button id="biomesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
           </div>
@@ -4651,26 +4587,10 @@
 
           <button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
           <div id="provincesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-              >Brush size:
-              <input
-                id="provincesManuallyBrush"
-                oninput="tip('Brush size: '+this.value); provincesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="8"
-                style="width: 5em"
-              />
-              <input
-                id="provincesManuallyBrushNumber"
-                oninput="tip('Brush size: '+this.value); provincesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="8"
-              /> </label
-            ><br />
+            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
+              Brush size:
+              <slider-input id="provincesBrush" min="5" max="100" value="8"></slider-input>
+            </div>
             <button id="provincesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
             <button id="provincesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
           </div>
@@ -4959,29 +4879,10 @@
 
           <button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
           <div id="zonesManuallyButtons" style="display: none">
-            <div>
-              <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-                >Brush:
-                <input
-                  id="zonesBrush"
-                  oninput="tip('Brush size: '+this.value); zonesBrushNumber.value = this.value"
-                  type="range"
-                  min="5"
-                  max="50"
-                  value="7"
-                  style="width: 9em"
-                />
-                <input
-                  id="zonesBrushNumber"
-                  oninput="tip('Brush size: '+this.value); zonesBrush.value = this.value"
-                  type="number"
-                  min="5"
-                  max="50"
-                  value="7"
-                />
-              </label>
+            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
+              Brush size:
+              <slider-input id="zonesBrush" min="5" max="100" value="8"></slider-input>
             </div>
-
             <div>
               <input id="zonesBrushLandOnly" class="checkbox" type="checkbox" checked />
               <label for="zonesBrushLandOnly" class="checkbox-label"><i>Change land only</i></label>
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 7f886edb..4ff9c145 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -51,24 +51,9 @@ function insertEditorHtml() {
       <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
       <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
       <div id="culturesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
-          <input
-            id="culturesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 7em"
-          />
-          <input
-            id="culturesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="culturesBrush" min="5" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -718,7 +703,7 @@ function selectCultureOnMapClick() {
 }
 
 function dragCultureBrush() {
-  const radius = +culturesManuallyBrush.value;
+  const radius = +culturesBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -759,7 +744,7 @@ function changeCultureForSelection(selection) {
 function moveCultureBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +culturesManuallyBrush.value;
+  const radius = +culturesBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index b6b2b5a0..cb2cd6f6 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -26,7 +26,7 @@ function insertEditorHtml() {
     <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 6em 7em 6em 7em">
       <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
       <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
-      <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by religion form" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
       <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
       <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
       <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
@@ -66,25 +66,9 @@ function insertEditorHtml() {
 
       <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
       <div id="religionsManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
-          <input
-            id="religionsManuallyBrush"
-            oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 7em"
-          />
-          <input
-            id="religionsManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label
-        ><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="religionsBrush" min="5" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -183,7 +167,7 @@ function religionsEditorAddLines() {
         <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
           ${getTypeOptions(r.type)}
         </select>
-        <input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
+        <input data-tip="Religion form" class="religionForm placeholder" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
         <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
@@ -215,7 +199,7 @@ function religionsEditorAddLines() {
       <select data-tip="Religion type" class="religionType" style="width: 5em">
         ${getTypeOptions(r.type)}
       </select>
-      <input data-tip="Religion form" class="religionForm hide" style="width: 6em"
+      <input data-tip="Religion form" class="religionForm" style="width: 6em"
         value="${r.form}" autocorrect="off" spellcheck="false" />
       <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
       <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
@@ -696,7 +680,7 @@ function selectReligionOnMapClick() {
 }
 
 function dragReligionBrush() {
-  const radius = +byId("religionsManuallyBrushNumber").value;
+  const radius = +byId("religionsBrush").value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -736,7 +720,7 @@ function changeReligionForSelection(selection) {
 function moveReligionBrush() {
   showMainTip();
   const [x, y] = d3.mouse(this);
-  const radius = +byId("religionsManuallyBrushNumber").value;
+  const radius = +byId("religionsBrush").value;
   moveCircle(x, y, radius);
 }
 
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 972a2083..4c3f81e3 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -24,7 +24,7 @@ function insertEditorHtml() {
     <div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
       <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
       <div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+      <div data-tip="Click to sort by capital name" class="sortable alphabetically" data-sortby="capital">Capital&nbsp;</div>
       <div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
       <div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
       <div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
@@ -89,26 +89,9 @@ function insertEditorHtml() {
 
       <button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
       <div id="statesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-          >Brush size:
-          <input
-            id="statesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 5em"
-          />
-          <input
-            id="statesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label
-        ><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="statesBrush" min="5" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -228,10 +211,10 @@ function statesEditorAddLines() {
         <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
           s.name
         }" readonly />
-        <svg class="coaIcon placeholder hide"></svg>
+        <svg class="coaIcon placeholder"></svg>
         <input class="stateForm placeholder" value="none" />
-        <span class="icon-star-empty placeholder hide"></span>
-        <input class="stateCapital placeholder hide" />
+        <span class="icon-star-empty placeholder"></span>
+        <input class="stateCapital placeholder" />
         <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
         <span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
@@ -267,14 +250,14 @@ function statesEditorAddLines() {
     >
       <fill-box fill="${s.color}"></fill-box>
       <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
-      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${
+      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer" viewBox="0 0 200 200"><use href="#stateCOA${
         s.i
       }"></use></svg>
       <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
         s.formName
       }" readonly />
-      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
-      <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
+      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer"></span>
+      <input data-tip="Capital name. Click and type to rename" class="stateCapital" value="${capital}" autocorrect="off" spellcheck="false" />
       <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
         s.culture
       )}</select>
@@ -959,7 +942,7 @@ function selectStateOnMapClick() {
 }
 
 function dragStateBrush() {
-  const r = +statesManuallyBrush.value;
+  const r = +statesBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -1002,7 +985,7 @@ function changeStateForSelection(selection) {
 function moveStateBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +statesManuallyBrush.value;
+  const radius = +statesBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index decc6995..4a91231b 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -383,7 +383,7 @@ function editBiomes() {
   }
 
   function dragBiomeBrush() {
-    const r = +biomesManuallyBrush.value;
+    const r = +biomesBrush.value;
 
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
@@ -425,7 +425,7 @@ function editBiomes() {
   function moveBiomeBrush() {
     showMainTip();
     const point = d3.mouse(this);
-    const radius = +biomesManuallyBrush.value;
+    const radius = +biomesBrush.value;
     moveCircle(point[0], point[1], radius);
   }
 
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index a8e3d7d4..ac270299 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -136,7 +136,7 @@ function editHeightmap(options) {
       return;
     }
 
-    moveCircle(x, y, brushRadius.valueAsNumber, "#333");
+    moveCircle(x, y, heightmapBrushRadius.valueAsNumber, "#333");
   }
 
   // get user-friendly (real-world) height value from map data
@@ -664,7 +664,7 @@ function editHeightmap(options) {
       const fromCell = +lineCircle.attr("data-cell");
       debug.selectAll("*").remove();
 
-      const power = byId("linePower").valueAsNumber;
+      const power = byId("heightmapLinePower").valueAsNumber;
       if (power === 0) return tip("Power should not be zero", false, "error");
 
       const heights = grid.cells.h;
@@ -686,7 +686,7 @@ function editHeightmap(options) {
     }
 
     function dragBrush() {
-      const r = brushRadius.valueAsNumber;
+      const r = heightmapBrushRadius.valueAsNumber;
       const [x, y] = d3.mouse(this);
       const start = findGridCell(x, y, grid);
 
@@ -704,7 +704,7 @@ function editHeightmap(options) {
     }
 
     function changeHeightForSelection(selection, start) {
-      const power = brushPower.valueAsNumber;
+      const power = heightmapBrushPower.valueAsNumber;
 
       const interpolate = d3.interpolateRound(power, 1);
       const land = changeOnlyLand.checked;
diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js
index 3af5f4f3..3367dbb5 100644
--- a/modules/ui/hotkeys.js
+++ b/modules/ui/hotkeys.js
@@ -30,7 +30,7 @@ function handleKeyup(event) {
   else if (code === "Tab") toggleOptions(event);
   else if (code === "Escape") closeAllDialogs();
   else if (code === "Delete") removeElementOnKey();
-  else if (code === "KeyO" && document.getElementById("canvas3d")) toggle3dOptions();
+  else if (code === "KeyO" && byId("canvas3d")) toggle3dOptions();
   else if (ctrl && code === "KeyQ") toggleSaveReminder();
   else if (ctrl && code === "KeyS") saveMap("machine");
   else if (ctrl && code === "KeyC") saveMap("dropbox");
@@ -123,24 +123,21 @@ function allowHotkeys() {
 function handleSizeChange(key) {
   let brush = null;
 
-  if (document.getElementById("brushRadius")?.offsetParent) brush = document.getElementById("brushRadius");
-  else if (document.getElementById("linePower")?.offsetParent) brush = document.getElementById("linePower");
-  else if (document.getElementById("biomesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("biomesManuallyBrush");
-  else if (document.getElementById("statesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("statesManuallyBrush");
-  else if (document.getElementById("provincesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("provincesManuallyBrush");
-  else if (document.getElementById("culturesManuallyBrush")?.offsetParent)
-    brush = document.getElementById("culturesManuallyBrush");
-  else if (document.getElementById("zonesBrush")?.offsetParent) brush = document.getElementById("zonesBrush");
-  else if (document.getElementById("religionsManuallyBrush")?.offsetParent)
-    brush = document.getElementById("religionsManuallyBrush");
+  if (byId("heightmapBrushRadius")?.offsetParent) brush = byId("heightmapBrushRadius");
+  else if (byId("heightmapLinePower")?.offsetParent) brush = byId("heightmapLinePower");
+  else if (byId("biomesBrush")?.offsetParent) brush = byId("biomesBrush");
+  else if (byId("culturesBrush")?.offsetParent) brush = byId("culturesBrush");
+  else if (byId("statesBrush")?.offsetParent) brush = byId("statesBrush");
+  else if (byId("provincesBrush")?.offsetParent) brush = byId("provincesBrush");
+  else if (byId("religionsBrush")?.offsetParent) brush = byId("religionsBrush");
+  else if (byId("zonesBrush")?.offsetParent) brush = byId("zonesBrush");
 
   if (brush) {
     const change = key === "-" ? -5 : 5;
-    const value = minmax(+brush.value + change, +brush.min, +brush.max);
-    brush.value = document.getElementById(brush.id + "Number").value = value;
+    const min = +brush.getAttribute("min") || 5;
+    const max = +brush.getAttribute("max") || 100;
+    const value = +brush.value + change;
+    brush.value = minmax(value, min, max);
     return;
   }
 
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index e2fd69f3..f8a88cfb 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -879,7 +879,7 @@ function editProvinces() {
   }
 
   function dragBrush() {
-    const r = +provincesManuallyBrush.value;
+    const r = +provincesBrush.value;
 
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
@@ -937,7 +937,7 @@ function editProvinces() {
   function moveBrush() {
     showMainTip();
     const point = d3.mouse(this);
-    const radius = +provincesManuallyBrush.value;
+    const radius = +provincesBrush.value;
     moveCircle(point[0], point[1], radius);
   }