v4.0.0

Breaking Changes

• position prop renamed to defaultPosition
• useReactCompareSliderRef removed - use useReactCompareSliderContext instead
• Handle now uses --rcs-handle-color CSS variable for default colour instead of color inline style
• Components no longer wrapped in forwardRef (refs still work as props in React 19)
• Slider width no longer defaults to 100% - uses intrinsic content size instead
• onlyHandleDraggable defaults to true for touch devices and false for non-touch devices
• Node 20 is now the minimum supported version

Features

• New clip property - accepts itemOne, itemTwo, or all to control which items are clipped; useful for content with alpha backgrounds, closes #136 thanks to @zoltan-mihalyi for working on this
• itemTwo is no longer absolutely positioned; both items' sizes are now factored into slider sizing
• Props moved to context and exposed via useReactCompareSliderContext hook, enabling fully bespoke slider implementations #180
• Individual components and the useReactCompareSlider hook now exported for building custom sliders with full control over internal props and callbacks #180, helps #158
• transition now defaults to 0.15s ease-out when user does not have prefers-reduced-motion: reduced
• onlyHandleDraggable now defaults to true for touch devices and false for non-touch devices via the pointer: coarse media query
• High contrast support added to the default slider handle #175
• Slider root element changed from button to div for improved accessibility #156
• CSS variables now used for bounds padding and positioning instead of JS #160
• Const objects exported for easy CSS variable access

Fixes

• Touch devices now correctly disconnect on touchend
• CJS version now published, resolving Jest issues, closes #144
• Slider sets touch-action: pan-y instead of touch-action: none, allowing scroll-past on touch devices, closes #134
• Removes tap highlight styles from handle on iOS #161

Performance

• CSS positioning is applied via CSS Houdini property to keep slider position and clip paths in sync across browsers
• Transition is smooth even on very low end devices

Other

• Upgrades to Storybook v10 using Vitest Playwright test runner
• Improves testing of components
• Moves server component tests to a Storybook server component test
• Moves from ESLint and Prettier to Biome
• Documents all exposed properties
• Uses Sonar for code coverage and reporting
• Adds React Doctor to CI

Full Changelog: v3.1.0...v4.0.0