app/web/static/dataset-picker.js

@@ -236,18 +236,18 @@ async function main() {
     continueBtn.title = selectedId ? '' : 'pick a dataset first';
   }
 
-  const nInputs = document.querySelectorAll('input[name="n"]');
+  const slider = document.getElementById('n-slider');
+  const nValue = document.getElementById('n-value');
   function applyN(n) {
+    nValue.textContent = n.toLocaleString();
     hidden.numPoints.value = String(n);
     for (const s of scenes) {
       const cap = s.geometry.attributes.position.count;
       s.geometry.setDrawRange(0, Math.min(n, cap));
     }
   }
-  nInputs.forEach(input => {
-    input.addEventListener('change', (e) => applyN(parseInt(e.target.value, 10)));
-  });
-  applyN(parseInt(document.querySelector('input[name="n"]:checked').value, 10));
+  slider.addEventListener('input', (e) => applyN(parseInt(e.target.value, 10)));
+  applyN(parseInt(slider.value, 10));
 
   let jitterScale = 0;
   const jInputs = document.querySelectorAll('input[name="j"]');

app/web/static/style.css

@@ -625,41 +625,40 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
   text-transform: uppercase;
   color: var(--mute);
 }
+.picker-controls .ctl-value {
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  color: var(--accent);
+  min-width: 3.5rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.picker-controls input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent);
+  height: 4px;
+}
 .picker-controls .segmented {
   grid-column: 2 / -1;
-  /* Shared 5-column track across every segmented row. 3-option rows drop
-     their options into columns 1/3/5 so first/middle/last align with the
-     5-option row's first/middle/last. */
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  display: flex;
+  justify-content: space-between;
   align-items: center;
 }
-.picker-controls .segmented.count-3 > label:nth-child(1) { grid-column: 1; }
-.picker-controls .segmented.count-3 > label:nth-child(2) { grid-column: 3; }
-.picker-controls .segmented.count-3 > label:nth-child(3) { grid-column: 5; }
 .picker-controls .segmented label {
   font-family: var(--mono);
   font-size: 0.78rem;
   color: var(--mute);
   cursor: pointer;
   padding: 3px 2px 4px;
-  transition: color 120ms ease;
+  border-bottom: 1px solid transparent;
+  transition: color 120ms ease, border-color 120ms ease;
   user-select: none;
   font-variant-numeric: tabular-nums;
   position: relative;
-  text-align: center;
-}
-.picker-controls .segmented label > span {
-  display: inline-block;
-  padding: 0 2px 1px;
-  border-bottom: 1px solid transparent;
-  transition: border-color 120ms ease;
 }
 .picker-controls .segmented label:hover { color: var(--ink); }
 .picker-controls .segmented label:has(input:checked) {
   color: var(--accent);
-}
-.picker-controls .segmented label:has(input:checked) > span {
   border-bottom-color: var(--accent);
 }
 .picker-controls .segmented label:has(input:focus-visible) {

app/web/templates/_runs.html

@@ -25,7 +25,7 @@
           {% if r.params %}
           <div class="paramline">
             <span><span class="k">N</span>&nbsp;{{ r.params.get('num_points', '?') }}</span>
-            <span><span class="k">T</span>&nbsp;{{ r.params.get('num_timesteps', r.params.get('num_snapshots', '?')) }}</span>
+            <span><span class="k">T</span>&nbsp;{{ r.params.get('num_timesteps', '?') }}</span>
             <span><span class="k">J</span>&nbsp;{{ r.params.get('jitter_scale', '?') }}</span>
             <span><span class="k">s</span>&nbsp;{{ r.params.get('seed', '?') }}</span>
             {% set ea = r.params.get('embed_args') or {} %}

app/web/templates/index.html

@@ -49,24 +49,19 @@
     </p>
 
     <div class="picker-controls">
-      <span class="ctl-label">n samples</span>
-      <div class="segmented count-5" role="radiogroup" aria-label="number of samples">
-        <label><input type="radio" name="n" value="100"><span>100</span></label>
-        <label><input type="radio" name="n" value="500" checked><span>500</span></label>
-        <label><input type="radio" name="n" value="1000"><span>1,000</span></label>
-        <label><input type="radio" name="n" value="2500"><span>2,500</span></label>
-        <label><input type="radio" name="n" value="5000"><span>5,000</span></label>
-      </div>
+      <label class="ctl-label" for="n-slider">n samples</label>
+      <input type="range" id="n-slider" min="100" max="5000" step="100" value="500">
+      <span class="ctl-value" id="n-value">500</span>
 
       <span class="ctl-label">noise σ</span>
-      <div class="segmented count-3" role="radiogroup" aria-label="noise σ">
+      <div class="segmented" role="radiogroup" aria-label="noise σ">
         <label><input type="radio" name="j" value="0.001"><span>0.001</span></label>
         <label><input type="radio" name="j" value="0.005" checked><span>0.005</span></label>
         <label><input type="radio" name="j" value="0.01"><span>0.010</span></label>
       </div>
 
       <span class="ctl-label">timesteps</span>
-      <div class="segmented count-3" role="radiogroup" aria-label="number of timesteps">
+      <div class="segmented" role="radiogroup" aria-label="number of timesteps">
         <label><input type="radio" name="f" value="12"><span>12</span></label>
         <label><input type="radio" name="f" value="24" checked><span>24</span></label>
         <label><input type="radio" name="f" value="48"><span>48</span></label>