Add slider for results, change default metric

nearest.css

@@ -93,8 +93,9 @@ math {
   display: grid;
   gap: 4px 8px;
   grid:
-    "bulb qvec qvec" 2em
     "bulb cspc cspc"
+    "bulb qvec qvec" 2em
+    "liml limt limt"
     "sort metr metr"
     "munu munu munu"
     "disp disp disp" 4em

nearest.html

@@ -27,7 +27,7 @@
         sortOrder: "max",
       },
       space: "jab",
-      sortMetric: "inertia",
+      sortMetric: "sigma",
       scaleOption: "inverse",
       sortOrder: "min",
     };
@@ -53,7 +53,6 @@
         <div class="toggle-on">▼ Controls</div>
       </label>
       <div class="toggle-on">
-        <!-- TODO control for results returned -->
         <div class="control-grid">
           <img style="grid-area: bulb; justify-self: center;"
             src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
@@ -62,12 +61,21 @@
             <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button"
               onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state); rerenderSearch(state)">
             <label for="space-toggle"
-              style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding-bottom: 0.5em;">
+              style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
               Color space:&nbsp;
               <span class="toggle-off">CIECAM02-UCS (Jab)</span>
               <span class="toggle-on">sRGB</span>
             </label>
           </div>
+          <label for="num-poke" style="grid-area: liml;">
+              Results:&nbsp;<span id="num-poke-display">10</span>
+          </label>
+          <input
+              id="num-poke" style="grid-area: limt;"
+              type="range" min="1" max="100" value="10"
+              oninput="document.getElementById('num-poke-display').textContent = event.target.value" 
+              onchange="state.number = event.target.value; onControlsChanged(state)"
+          >
           <div class="toggle-box" style="grid-area: sort">
             <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button"
               onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
@@ -78,13 +86,13 @@
           </div>
           <select style="grid-area: metr" autocomplete="off" id="sort-metric"
             onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
-            <option value="sigma">RMS Deviation (σ)</option>
+            <option value="sigma" selected>RMS Deviation (σ)</option>
             <option value="bigTheta">Mean of Angular Difference (Θ)</option>
             <option value="theta">Angular Difference of Mean (θ)</option>
             <option value="phi">Hue Difference of Mean (ϕ)</option>
             <option value="delta">Euclidean Distance to Mean (δ)</option>
             <option value="ch">Chebyshev Distance to Mean (Ч)</option>
-            <option value="inertia" selected>Inertia (I)</option>
+            <option value="inertia">Inertia (I)</option>
             <option value="size">Size (N)</option>
           </select>
           <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>