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>
|
)}>{format(value)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative h-1.5 bg-dark-900 rounded overflow-hidden">
|
<div className="relative h-1.5 bg-dark-900 rounded overflow-hidden">
|
||||||
|
{/* Deviation bar (colored, from center to current value) */}
|
||||||
<div
|
<div
|
||||||
className={clsx('absolute h-full rounded transition-all', trackColor)}
|
className={clsx('absolute h-full rounded transition-all', trackColor)}
|
||||||
style={colorize
|
style={colorize
|
||||||
@@ -170,6 +171,13 @@ function Slider({
|
|||||||
: { left: 0, width: `${pct}%` }
|
: { 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
|
<input
|
||||||
type="range" min={min} max={max} step={step} value={value}
|
type="range" min={min} max={max} step={step} value={value}
|
||||||
onChange={e => onChange(parseFloat(e.target.value))}
|
onChange={e => onChange(parseFloat(e.target.value))}
|
||||||
|
|||||||
Reference in New Issue
Block a user