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:
@@ -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))}
|
||||
|
||||
Reference in New Issue
Block a user