Make component completely controllable from the parent

[nerdyman]

The slider currently takes props like position and moves them to internal states. This is moslty fine but leads to edge cases as shown in #64 in #48.

Option 1 - Standalone Hook

The state for the main component could be abstracted into it's own hook and exported from the library. The slider component itself would not call the hook, the parent component would instead. This would allow the parent component to manipulate all state and share it with ReactCompareSlider.

E.g.

import { ReactCompareSlider, useSliderState } from 'react-compare-slider';

export const Example = () => {
  const sliderState = useSliderState();

    /** Optional override */
    const onPositionChange = (position) => {
      window.alert(position);
      sliderState.setPosition(position);
    };

  return <ReactCompareSlider {...sliderState} onPositionChange={onPositionChange} itemOne={} itemTwo={} />
};

Option 2 - useimperativehandle

useimperativehandle may be a simpler option from a DX perspective as the API for v2 and v3 would remain the same but you could optionally call the hook to access the internal properties of the slider.

[nerdyman]

Resolved in #94