diff --git a/src/react-compare-slider.tsx b/src/react-compare-slider.tsx index 8c3dcdb..acc1aa6 100644 --- a/src/react-compare-slider.tsx +++ b/src/react-compare-slider.tsx @@ -130,11 +130,18 @@ export const ReactCompareSlider: React.FC { + /** Reference to root container. */ const containerRef = useRef(document.createElement('div')); + /** Previous props positon (tracks user-supplied `position`). */ const prevPropsPosition = usePrevious(position); + /** Reference to current position as a percentage value. */ const internalPositionPc = useRef(position); + /** Internal position in pixels. */ const [internalPositionPx, setInternalPositionPx] = useState(0); + /** Reference to previous `internalPositionPx` value. */ + /** Whether user is currently dragging. */ const [isDragging, setIsDragging] = useState(false); + /** Whether component has a `window` event binding. */ const hasWindowBinding = useRef(false); /** Update internal px and pc */ @@ -148,11 +155,11 @@ export const ReactCompareSlider: React.FC height) { + positionPx = height; + } else if (!portrait && positionPx > width) { + positionPx = width; + } + + // Calculate percentage with bounds checking. internalPositionPc.current = Math.min( Math.max((positionPx / (portrait ? height : width)) * 100, 0), 100 @@ -240,7 +256,7 @@ export const ReactCompareSlider: React.FC