File size: 1,969 Bytes
a21c316 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import { useState, useEffect } from 'react';
interface DebouncedSliderProps {
value: number;
onChange: (value: number) => void;
min: number;
max: number;
step: number;
className?: string; // For passing 'range range-purple range-xs' etc.
}
export default function DebouncedSlider({ value, onChange, min, max, step, className }: DebouncedSliderProps) {
const [localValue, setLocalValue] = useState(value);
const [isDragging, setIsDragging] = useState(false);
// Sync local value with prop value when not dragging (for external updates)
useEffect(() => {
if (!isDragging) {
setLocalValue(value);
}
}, [value, isDragging]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setLocalValue(parseFloat(e.target.value));
};
const handlePointerDown = () => {
setIsDragging(true);
};
const handlePointerUp = (e: React.PointerEvent<HTMLInputElement>) => {
setIsDragging(false);
const newValue = parseFloat((e.target as HTMLInputElement).value);
onChange(newValue);
};
// Also handle onMouseUp/onTouchEnd as backup if Pointer events behave oddly in some envs,
// but Pointer events are standard now.
// Actually, simple onChange + onMouseUp is robust enough for standard ranges.
return (
<div className="flex items-center gap-3 w-full">
<input
type="range"
min={min}
max={max}
step={step}
className={className}
value={localValue}
onChange={handleChange}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
/>
<span className="text-xs font-mono font-bold text-purple-600 dark:text-purple-400 w-10 text-right">
{Math.round(localValue * 100)}%
</span>
</div>
);
}
|