29 lines
877 B
TypeScript
29 lines
877 B
TypeScript
type RangeSliderProps = {
|
|
min: number
|
|
max: number
|
|
step: number
|
|
value: number
|
|
onChange: (value: number) => void
|
|
}
|
|
|
|
/** 채워진 트랙이 값을 따라가는 파란 슬라이더 (ROI 시뮬레이터·히어로 콘솔 공용). */
|
|
function RangeSlider({ min, max, step, value, onChange }: RangeSliderProps) {
|
|
const filled = ((value - min) / (max - min)) * 100
|
|
return (
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={(e) => onChange(Number(e.target.value))}
|
|
className="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-primary transition-all"
|
|
style={{
|
|
background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${filled}%, var(--color-line-strong) ${filled}%, var(--color-line-strong) 100%)`,
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { RangeSlider }
|