Compare two components side-by-side or top-to-toe.
4 | 5 | [](https://codesandbox.io/p/sandbox/github/nerdyman/react-compare-slider/tree/main/docs/example?file=/src/App.tsx:1,1) 6 | 7 |
8 | 
9 | 
10 | 
12 | 
13 | 
14 |
15 | 10 | 11 | **Note**: You should use a non-interactive elements (`div`, `span`, etc.) for custom `handle` 12 | components as handles are rendered within a `button` by the library. 13 | 14 |
15 | 16 | Custom Handles can be used via the `handle` prop on the main slider component. 17 | If a custom `handle` is not supplied `ReactCompareSliderHandle` will 18 | be used instead. 19 | 20 |10 | 11 | **Note**: Properties returned from the hook are only usable _after_ the component has mounted. 12 | 13 |
14 | 15 | The `useReactCompareSliderRef` hook allows you to access the root container as a ref (`rootContainer`) and provides 16 | access to the internal function used to performantly update the slider position (`setPosition`). 17 | 18 | | Property | Type | Description 19 | | :------------------| :---------------------------- | :---------------------------------------------- 20 | | `rootContainer` | `HTMLDivElement` | The root container DOM element. 21 | | `handleContainer` | `HTMLButtonElement` | The DOM element of the `handle` parent. 22 | | `setPosition` | `(position: number) => void` | Set the slider position to the given percentage. 23 | 24 | 25 | 26 | `setPosition` offers performant programmatic control of the slider. It is more performant because 27 | it does not trigger a re-render, as opposed to setting the `position` prop which will re-render the 28 | component then call the internal set position function as a side effect. 29 | 30 | Another benefit of `setPosition` is that it can be used to reset the slider position back to 31 | the initial position. This is not possible with the `position` prop. 32 | 33 | ```tsx 34 | const Example = () => { 35 | const reactCompareSliderRef = useReactCompareSliderRef(); 36 | 37 | // Safely use the ref properties in an effect or event handler callback. 38 | useEffect(() => { 39 | console.log(reactCompareSliderRef.current.rootContainer); // The root container DOM element. 40 | reactCompareSliderRef.current.setPosition(20); // Set the slider position to 20%. 41 | }, [reactCompareSliderRef]); 42 | 43 | return ( 44 |
25 | 
37 | onlyHandleDraggable for touch devices only
176 | {String(isTouchDevice)}
178 |
179 |
180 | );
181 | };
182 |
183 | DetectTouchDevices.argTypes = {
184 | onlyHandleDraggable: {
185 | control: {
186 | disable: true,
187 | },
188 | },
189 | };
190 |
191 | DetectTouchDevices.args = {};
192 |
193 | export const WaitForImageLoad: StoryFn
172 | The useReactCompareSliderRef hook exposes the handleContainer{' '}
173 | property which points to the button element that contains the{' '}
174 | handle. By default, when the handleContainer or any elements
175 | within it are clicked, it focuses the handleContainer and moves the slider
176 | into view. This is for accessibility but you can override the behaviour as needed. In this
177 | example, instead of plainly focusing the slider, it focuses and smooth scrolls it into
178 | view.
179 |
182 | Note that this only occurs when the
183 | handleContainer or elements within the handleContainer are
184 | clicked. This is to allow custom itemOne|itemTwo components to be interacted
185 | with without the slider stealing focus.
186 |
57 | ),
58 | itemTwo: (
59 | 
65 | ),
66 | }));
67 | };
68 |
69 | return (
70 |