fix(manifold): slider fill tracks value; hide noise-cap rings

- mf-slider-input fill used calc(var(--mf-pct)*100%) but three consumers
  (OutputControlRow held slider, OutputEditor, shared-ui Field) never set
  --mf-pct, so the coloured track-fill stayed empty while only the native
  thumb moved. Set --mf-pct inline on all three; harden the base class
  (appearance:none + transparent bg + --mf-pct fallback + moz-range-progress).
- hide the two concentric noise-cap exploration rings around the input dot.
This commit is contained in:
monkey-w1n5t0n 2026-06-28 22:09:58 +02:00
parent cb28facc65
commit 30fc44ba1e
5 changed files with 26 additions and 21 deletions

View file

@ -285,22 +285,8 @@ export function Manifold({
ctx.stroke();
}
if (nc > 0.001) {
const breathe = 1 + Math.sin(now / 600) * 0.06;
const rCap = nc * Math.min(W, H) * 0.5 * breathe;
const rCur = rCap * 0.55;
ctx.setLineDash([4, 5]);
ctx.strokeStyle = 'rgba(255,106,0,0.4)';
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.arc(px, py, rCap, 0, Math.PI * 2);
ctx.stroke();
ctx.strokeStyle = 'rgba(255,106,0,0.7)';
ctx.beginPath();
ctx.arc(px, py, rCur, 0, Math.PI * 2);
ctx.stroke();
ctx.setLineDash([]);
}
// Noise-cap exploration rings hidden for now (kept for possible later use).
void nc;
ctx.shadowColor = fz ? cyan : accent;
ctx.shadowBlur = 18;

View file

@ -51,7 +51,7 @@ function MiniSlider({
disabled={disabled}
onChange={(e) => onChange(parseFloat(e.target.value))}
className="mf-slider-input"
style={{ width: '100%' }}
style={{ width: '100%', ['--mf-pct' as string]: `${Math.max(0, Math.min(1, value))}` } as CSSProperties}
/>
</label>
);

View file

@ -163,7 +163,13 @@ export function CompactAxis({
value={value}
onChange={(e) => onChange(parseFloat(e.target.value))}
className="mf-slider-input"
style={{ width: 120, ['--mf-axis-accent' as string]: accent } as CSSProperties}
style={
{
width: 120,
['--mf-axis-accent' as string]: accent,
['--mf-pct' as string]: `${Math.max(0, Math.min(1, value))}`,
} as CSSProperties
}
/>
<span
style={{

View file

@ -8,7 +8,7 @@
* (ConsoleApp owns it) never a second data path (dock-spec §3.2, §8).
*/
import { useRef } from 'react';
import type { PointerEvent as ReactPointerEvent } from 'react';
import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
import type { MFParam, ParamStatus } from '../console/model';
import { CurvePad } from '../console/CurvePad';
@ -288,7 +288,7 @@ export function OutputControlRow({ param, value, onChange, showCurve = false }:
value={param.val}
onChange={(e) => onChange({ val: parseFloat(e.target.value) })}
className="mf-slider-input"
style={{ flex: 1 }}
style={{ flex: 1, ['--mf-pct' as string]: `${Math.max(0, Math.min(1, param.val))}` } as CSSProperties}
/>
</label>
)}

View file

@ -13,13 +13,21 @@
*/
/* ---- Slider (.mf-slider-input) ---- */
/* Base reset so the custom track/thumb styling applies even when a consumer
doesn't set these inline (e.g. OutputControlRow's held slider). The colored
fill tracks `--mf-pct` (0..1); it falls back to 0 if a consumer forgets it. */
.mf-slider-input {
-webkit-appearance: none;
appearance: none;
background: transparent;
}
.mf-slider-input::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(
to right,
var(--accent) 0%,
var(--accent) calc(var(--mf-pct) * 100%),
var(--accent) calc(var(--mf-pct, 0) * 100%),
var(--bg-3) 0%
);
}
@ -28,6 +36,11 @@
border-radius: 999px;
background: var(--bg-3);
}
.mf-slider-input::-moz-range-progress {
height: 4px;
border-radius: 999px;
background: var(--accent);
}
.mf-slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;