diff --git a/WebHostLib/options.py b/WebHostLib/options.py
index 33339daa..15b7bd61 100644
--- a/WebHostLib/options.py
+++ b/WebHostLib/options.py
@@ -231,6 +231,13 @@ def generate_yaml(game: str):
 
                 del options[key]
 
+            # Detect keys which end with -range, indicating a NamedRange with a possible custom value
+            elif key_parts[-1].endswith("-range"):
+                if options[key_parts[-1][:-6]] == "custom":
+                    options[key_parts[-1][:-6]] = val
+
+                del options[key]
+
         # Detect random-* keys and set their options accordingly
         for key, val in options.copy().items():
             if key.startswith("random-"):
diff --git a/WebHostLib/templates/playerOptions/macros.html b/WebHostLib/templates/playerOptions/macros.html
index 415739b8..30a4fc78 100644
--- a/WebHostLib/templates/playerOptions/macros.html
+++ b/WebHostLib/templates/playerOptions/macros.html
@@ -54,7 +54,7 @@
 {% macro NamedRange(option_name, option) %}
     {{ OptionTitle(option_name, option) }}
     <div class="named-range-container">
-        <select id="{{ option_name }}-select" data-option-name="{{ option_name }}" {{ "disabled" if option.default == "random" }}>
+        <select id="{{ option_name }}-select" name="{{ option_name }}" data-option-name="{{ option_name }}" {{ "disabled" if option.default == "random" }}>
             {% for key, val in option.special_range_names.items() %}
                 {% if option.default == val %}
                     <option value="{{ val }}" selected>{{ key|replace("_", " ")|title }} ({{ val }})</option>
@@ -64,17 +64,17 @@
             {% endfor %}
             <option value="custom" hidden>Custom</option>
         </select>
-        <div class="named-range-wrapper">
+        <div class="named-range-wrapper js-required">
             <input
                     type="range"
                     id="{{ option_name }}"
-                    name="{{ option_name }}"
+                    name="{{ option_name }}-range"
                     min="{{ option.range_start }}"
                     max="{{ option.range_end }}"
                     value="{{ option.default | default(option.range_start) if option.default != "random" else option.range_start }}"
                     {{ "disabled" if option.default == "random" }}
             />
-            <span id="{{ option_name }}-value" class="range-value js-required">
+            <span id="{{ option_name }}-value" class="range-value">
                 {{ option.default | default(option.range_start) if option.default != "random" else option.range_start }}
             </span>
             {{ RandomizeButton(option_name, option) }}
diff --git a/WebHostLib/templates/playerOptions/playerOptions.html b/WebHostLib/templates/playerOptions/playerOptions.html
index aeb6e864..73de5d56 100644
--- a/WebHostLib/templates/playerOptions/playerOptions.html
+++ b/WebHostLib/templates/playerOptions/playerOptions.html
@@ -11,7 +11,7 @@
     <noscript>
         <style>
             .js-required{
-                display: none;
+                display: none !important;
             }
         </style>
     </noscript>