fix: add position tick on colorize sliders so cursor is visible at baseline

At baseline (deviation=0) the colored bar had width=0 and disappeared.
Added a 2px vertical tick mark at the current slider position so the
handle location is always visible even when there's no deviation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OpenSquared
2026-06-26 22:31:12 +02:00
parent 3133e073f7
commit e00b78f2f6

View File

@@ -163,6 +163,7 @@ function Slider({
)}>{format(value)}</span>
</div>
<div className="relative h-1.5 bg-dark-900 rounded overflow-hidden">
{/* Deviation bar (colored, from center to current value) */}
<div
className={clsx('absolute h-full rounded transition-all', trackColor)}
style={colorize
@@ -170,6 +171,13 @@ function Slider({
: { left: 0, width: `${pct}%` }
}
/>
{/* Position tick — always visible so cursor location is clear at baseline */}
{colorize && (
<div
className="absolute top-0 bottom-0 w-0.5 bg-slate-400 transition-all"
style={{ left: `${Math.min(98.5, pct)}%` }}
/>
)}
<input
type="range" min={min} max={max} step={step} value={value}
onChange={e => onChange(parseFloat(e.target.value))}