34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
interface RangeProgressBarProps {
|
|
low: number
|
|
high: number
|
|
current: number
|
|
}
|
|
|
|
export function RangeProgressBar({ low, high, current }: RangeProgressBarProps) {
|
|
const percentage = ((current - low) / (high - low)) * 100
|
|
const clampedPercentage = Math.max(0, Math.min(100, percentage))
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-xs text-muted-foreground w-16 text-left">${low.toFixed(2)}</div>
|
|
<div className="flex-1 bg-muted h-2 relative border border-border overflow-visible">
|
|
{/* Filled portion */}
|
|
<div
|
|
className="bg-primary h-full transition-all"
|
|
style={{ width: `${clampedPercentage}%` }}
|
|
/>
|
|
{/* Marker - positioned absolutely */}
|
|
<div
|
|
className="w-3 h-3 bg-primary absolute top-1/2 -translate-y-1/2 -translate-x-1/2"
|
|
style={{ left: `${clampedPercentage}%` }}
|
|
/>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground w-16 text-right">${high.toFixed(2)}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|