Make results control into two buttons

web/index.html

@@ -214,19 +214,6 @@
         </div>
         <!-- Filter/Limit -->
         <div class="control-group | flex center-items">
-          <label>
-            <div class="center emphasis">
-              Results:&nbsp;<output form="colorDisplayForm" name="output">10</output>
-            </div>
-            <input
-              form="colorDisplayForm"
-              name="resultsToDisplay"
-              type="range"
-              min="1"
-              max="100"
-              value="10"
-            />
-          </label>
           <div id="filter-toggles" class="flex col">
             <label class="center">
               <input
@@ -389,6 +376,29 @@
         </div>
       </div>
       <div id="color-results" class="flex wrap"></div>
+      <div class="flex center-items center-content">
+        <button
+          title="Fewer Results"
+          class="aspect-even | material-symbols-outlined"
+          type="button"
+          form="colorDisplayForm"
+          name="lessResults"
+        >
+          remove
+        </button>
+        <div class="emphasis">
+          Results:&nbsp;<output form="colorDisplayForm" name="output">10</output>
+        </div>
+        <button
+          title="More Results"
+          class="aspect-even | material-symbols-outlined"
+          type="button"
+          form="colorDisplayForm"
+          name="moreResults"
+        >
+          add
+        </button>
+      </div>
       <hr />
       <div id="name-search-controls" class="flex wrap center-items" data-flexGap="small">
         <input

web/main.js

@@ -548,12 +548,18 @@ const model = {
     renderPokemon(this.nameSearchResults ?? [], nameSearchResultsTarget);
   },
 
+  resultsToDisplay: 10,
+
+  setResultsToDisplay(count) {
+    colorDisplayElements.output.value = this.resultsToDisplay = clamp(0, count, 100);
+    this.renderColorSearchResults();
+  },
+
   renderColorSearchResults() {
-    const count = parseInt(colorDisplayElements.resultsToDisplay.value);
     const dexNums = new Set();
     const toRender = [];
     for (const pkmn of this.ranked) {
-      if (toRender.length >= count) {
+      if (toRender.length >= this.resultsToDisplay) {
         break;
       }
       if (filterElements.hideNoStart.checked && pkmn.traits.includes("nostart")) {
@@ -626,16 +632,13 @@ const randomizeTargetColor = () =>
 
 targetColorElements.randomColor.addEventListener("click", randomizeTargetColor);
 
-colorDisplayElements.resultsToDisplay.addEventListener(
-  "input",
-  ({ target: { value } }) => {
-    colorDisplayElements.output.value = value;
-  }
-);
+colorDisplayElements.lessResults.addEventListener("click", () => {
+  model.setResultsToDisplay(model.resultsToDisplay - 10);
+});
 
-colorDisplayElements.resultsToDisplay.addEventListener("change", () =>
-  model.renderColorSearchResults()
-);
+colorDisplayElements.moreResults.addEventListener("click", () => {
+  model.setResultsToDisplay(model.resultsToDisplay + 10);
+});
 
 Array.from(filterElements).forEach(el =>
   el.addEventListener("change", () => model.renderColorSearchResults())

web/styles.css

@@ -437,6 +437,8 @@ button.color-select:hover {
 
 /* Sort Controls */
 
+button[name="moreResults"],
+button[name="lessResults"],
 button[name="random"],
 button[name="clear"] {
   width: 2rem;