ajusting slider

index.html

@@ -122,7 +122,7 @@ Load model
 
 </div>
 
-<div>
+<!-- <div>
     <label>
         Input Tokens (<i>n</i><sub>in</sub>):
         <span id="ninValue">64</span>
@@ -136,10 +136,84 @@ Load model
         step="1"
         value="64"
         oninput="ninValue.textContent = this.value; draw();">
+</div> 
+
+<div id="plot"></div> -->
+
+<div id="ninWrapper">
+    <label>
+        Input Tokens (<i>n</i><sub>in</sub>):
+        <span id="ninValue">64</span>
+    </label>
+
+    <!-- Visible slider: linear in EXPONENT space (2^0 to 2^12 = 1 to 4096) -->
+    <input
+        id="ninSlider"
+        type="range"
+        min="0"
+        max="12"
+        step="0.01"
+        value="6"
+        list="ninTicks"
+        oninput="updateNin(this.value)">
+
+    <!-- Tick marks at each power of two, matching the plot's xaxis.tickvals -->
+    <datalist id="ninTicks">
+        <option value="0"></option>
+        <option value="1"></option>
+        <option value="2"></option>
+        <option value="3"></option>
+        <option value="4"></option>
+        <option value="5"></option>
+        <option value="6"></option>
+        <option value="7"></option>
+        <option value="8"></option>
+        <option value="9"></option>
+        <option value="10"></option>
+        <option value="11"></option>
+        <option value="12"></option>
+    </datalist>
+
+    <!-- Hidden input: holds the ACTUAL token count, exactly what app.js reads -->
+    <input id="nin" type="hidden" value="64">
 </div>
 
 <div id="plot"></div>
 
+<script src="app.js"></script>
+
+<script>
+    function updateNin(exponent) {
+        const value = Math.round(Math.pow(2, parseFloat(exponent)));
+        const clamped = Math.min(4096, Math.max(1, value));
+
+        document.getElementById('nin').value = clamped;
+        document.getElementById('ninValue').textContent = clamped;
+
+        draw();
+    }
+
+    // Keep the slider's on-screen width exactly matched to the rendered plot width.
+    function syncSliderWidth() {
+        const plotDiv = document.getElementById('plot');
+        const slider = document.getElementById('ninSlider');
+        if (plotDiv && slider) {
+            const plotWidth = plotDiv.getBoundingClientRect().width;
+            if (plotWidth > 0) {
+                slider.style.width = plotWidth + 'px';
+            }
+        }
+    }
+
+    window.addEventListener('resize', syncSliderWidth);
+    window.addEventListener('load', syncSliderWidth);
+
+    if (window.ResizeObserver) {
+        const plotEl = document.getElementById('plot');
+        if (plotEl) new ResizeObserver(syncSliderWidth).observe(plotEl);
+    }
+</script>
+
 
 <script src="app.js"></script>
 

style.css

@@ -15,6 +15,11 @@ p {
 	margin-top: 5px;
 }
 
+#ninSlider {
+    width: 100%;
+    box-sizing: border-box;
+}
+
 .card {
 	max-width: 620px;
 	margin: 0 auto;