diff --git a/WebHostLib/static/assets/weightedOptions.js b/WebHostLib/static/assets/weightedOptions.js
index 0417ab174b..4aa99963d5 100644
--- a/WebHostLib/static/assets/weightedOptions.js
+++ b/WebHostLib/static/assets/weightedOptions.js
@@ -123,12 +123,26 @@ window.addEventListener('load', () => {
 });
 
 const addRangeRow = (optionName) => {
-  const inputQuery = `input[type=number][data-option="${optionName}"].range-option-value`;
+  const inputQuery = `input[data-option="${optionName}"]`;
   const inputTarget = document.querySelector(inputQuery);
   const newValue = inputTarget.value;
-  if (!/^-?\d+$/.test(newValue)) {
-    alert('Range values must be a positive or negative integer!');
-    return;
+  switch (inputTarget.type) {
+    case 'number':
+      if (!/^-?\d+$/.test(newValue)) {
+        alert('Range values must be a positive or negative integer!');
+        return;
+      }
+      break;
+    case 'text':
+      if (newValue === "") {
+        alert('Range values for text must be a non-empty string!');
+        return;
+      }
+      break;
+    default:
+      console.error(`Found unsupported input type: ${inputTarget.type}`);
+      return;
+      break;
   }
   inputTarget.value = '';
   const tBody = document.querySelector(`table[data-option="${optionName}"].range-rows tbody`);
diff --git a/WebHostLib/templates/weightedOptions/macros.html b/WebHostLib/templates/weightedOptions/macros.html
index 1d485a24de..0c20992973 100644
--- a/WebHostLib/templates/weightedOptions/macros.html
+++ b/WebHostLib/templates/weightedOptions/macros.html
@@ -71,10 +71,10 @@
     <div class="hint-text">
         This option allows custom values only. Please enter your desired values below.
         <div class="custom-value-wrapper">
-            <input class="custom-value" data-option="{{ option_name }}" placeholder="Custom Value" />
-            <button type="button" data-option="{{ option_name }}">Add</button>
+            <input type="text" class="custom-value" data-option="{{ option_name }}" placeholder="Custom Value" />
+            <button type="button" class="add-range-option-button" data-option="{{ option_name }}">Add</button>
         </div>
-        <table>
+        <table class="range-rows" data-option="{{ option_name }}">
             <tbody>
                 {% if option.default %}
                     {{ RangeRow(option_name, option, option.default, option.default) }}
@@ -88,11 +88,11 @@
     <div class="hint-text">
         Custom values are also allowed for this option. To create one, enter it into the input box below.
         <div class="custom-value-wrapper">
-            <input class="custom-value" data-option="{{ option_name }}" placeholder="Custom Value" />
-            <button type="button" data-option="{{ option_name }}">Add</button>
+            <input type="text" class="custom-value" data-option="{{ option_name }}" placeholder="Custom Value" />
+            <button type="button" class="add-range-option-button" data-option="{{ option_name }}">Add</button>
         </div>
     </div>
-    <table>
+    <table class="range-rows" data-option="{{ option_name }}">
         <tbody>
             {% for id, name in option.name_lookup.items() %}
                 {% if name != 'random' %}