feat(/designs): density slider shows current col count + aria-valuenow; updates on resize-clamp so mobile shows '2' not '8'

2cc97c71daab25c83bd44d72b3671d9c5e4a5d56 · 2026-05-14 09:27:39 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit 2cc97c71daab25c83bd44d72b3671d9c5e4a5d56
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 09:27:39 2026 -0700

    feat(/designs): density slider shows current col count + aria-valuenow; updates on resize-clamp so mobile shows '2' not '8'
---
 server.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 4f59385..7b932d8 100644
--- a/server.js
+++ b/server.js
@@ -3495,7 +3495,8 @@ ${cat === 'mural-scenic' ? `
           </select>
         </div>
         <label class="density-label" style="display:inline-flex;align-items:center;gap:8px;font:11px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)">Density
-          <input type="range" id="density-slider" min="1" max="12" step="1" value="6" class="density-range" style="flex:0 0 140px">
+          <input type="range" id="density-slider" min="1" max="12" step="1" value="6" class="density-range" style="flex:0 0 140px" aria-valuemin="1" aria-valuemax="12" aria-valuenow="6">
+          <span id="density-value" aria-live="polite" style="font:600 11px var(--sans);color:var(--ink-soft);min-width:18px;text-align:right;font-variant-numeric:tabular-nums">6</span>
         </label>
         <button type="button" id="surprise-btn" class="filter-select"
           style="background:var(--gold,#c9a14b);color:var(--accent,#0d0d0d);border:0;font-weight:500;padding:8px 14px;cursor:pointer;border-radius:6px;letter-spacing:.04em"
@@ -3879,6 +3880,7 @@ ${FOOTER}
 (function(){
   var slider = document.getElementById('density-slider');
   var grid   = document.getElementById('catalog-grid');
+  var label  = document.getElementById('density-value');
   var saved  = localStorage.getItem('wallco-density');
   if (saved) slider.value = saved;
   // Clamp inline --cols for narrow viewports so a desktop "density=8" pref
@@ -3890,6 +3892,8 @@ ${FOOTER}
     if (w <= 600)      n = Math.min(n, 2);
     else if (w <= 900) n = Math.min(n, 3);
     grid.style.setProperty('--cols', String(n));
+    if (label) label.textContent = String(n);
+    slider.setAttribute('aria-valuenow', String(n));
   }
   applyCols(slider.value);
   slider.addEventListener('input', function() {

← c6bcfc5 fix(/designs mobile): clamp density slider for narrow viewpo · back to Wallco Ai · feat(/designs): tighten NEW window 72h→6h; was firing on eve 2fae7d5 →