Release 4.0.0-1
Pre-release
Pre-release
npm i react-compare-slider@beta
pnpm i react-compare-slider@beta
yarn add react-compare-slider@betaBreaking Changes
bothclip property has been renamed toallpositionprop has been renamed todefaultPositionuseReactCompareSliderRefhas been removed- Use custom slider or
useReactCompareSliderContextdetailed below instead
- Use custom slider or
- Handle now uses the
--rcs-handle-colorCSS variable to set the default handle colour, previously it used thecolorinline style - Components are no longer wrapped in
forwardRef(refcan still be passed as a prop on React 19)
Features
- Moves props to context so child components can pick up all internal properties used by the slider #180
- Exposes internal props to children via the
useReactCompareSliderContexthook #180 - Exports individual components, allowing developers to create their own completely bespoke sliders #180
- Exports the
useReactCompareSliderhook to instantiate the custom slider component context #180- Allows developers to override all internal props and callbacks used by the slider, helps #158
- Adds high contrast support to the default slider handle #175
- Replaces the slider root element
buttonwith adivto improve a11y standards #156 - Uses CSS variables to calculate bounds padding and positioning instead of JS, improving performance #160
- Exports const objects to easily access CSS variables
Fixes
- Removes tap highlight styles from handle on iOS #161
Other
- Upgrades to Storybook v10 using Vitest Playwright test runner
- Improves testing of components
- Moves server components tests from custom project in the docs folder to a Storybook server component test
- Moves from ESLint and Prettier to Biome
- Documents all exposed properties
- Uses Sonar for code coverage and reporting