Give radius and softness both number and slider controls

xray.css

@@ -29,4 +29,8 @@ img {
 
 #menu.start .nostart {
     display: none;
+}
+
+#menu input[type=number] {
+    max-width: 36pt;
 }

xray.html

@@ -25,11 +25,13 @@
         <button id="load-button">Load</button>
         <label class="nostart">
             Radius:
-            <input type="number" id="radius" placeholder="200" value="200">
+            <input type="number" id="radius-input" placeholder="200" value="200">
+            <input type="range" id="radius-slider" min="0" max="500" value="200">
         </label>
         <label class="nostart">
             Softness:
-            <input type="range" id="softness" min="0" max="100" value="25">
+            <input type="number" id="softness-input" placeholder="25" value="25">
+            <input type="range" id="softness-slider" min="0" max="100" value="25">
         </label>
         <button id="share-button" class="nostart">Share</button>
     </div>

xray.js

@@ -75,17 +75,37 @@ document.addEventListener("DOMContentLoaded", e => {
         updateOverlay(touches);
     });
     
-    document.querySelector("#radius").addEventListener("change", e => {
+    document.querySelector("#radius-slider").addEventListener("input", e => {
         try {
             radius = parseInt(e.target.value);
+            document.querySelector("#radius-input").value = radius;
         } catch {
             console.warn("That wasn't a valid radius: " + e.target.value);
         }
     });
     
-    document.querySelector("#softness").addEventListener("change", e => {
+    document.querySelector("#radius-input").addEventListener("input", e => {
+        try {
+            radius = parseInt(e.target.value);
+            document.querySelector("#radius-slider").value = radius;
+        } catch {
+            console.warn("That wasn't a valid radius: " + e.target.value);
+        }
+    });
+    
+    document.querySelector("#softness-slider").addEventListener("input", e => {
+        try {
+            softness = parseInt(e.target.value);
+            document.querySelector("#softness-input").value = softness;
+        } catch {
+            console.warn("That wasn't a valid softness: " + e.target.value);
+        }
+    });
+    
+    document.querySelector("#softness-input").addEventListener("input", e => {
         try {
             softness = parseInt(e.target.value);
+            document.querySelector("#softness-slider").value = softness;
         } catch {
             console.warn("That wasn't a valid softness: " + e.target.value);
         }