duality-comparison-slider

Duality - Comparison Slider Component

Duality React component that allows users to compare "Before" and "After" content using a smooth, adjustable slider. This component can showcase image transformations, design differences, or any content that benefits from direct comparison.

Installation

npm install duality-comparison-slider

Usage

Import ComparisonSlider and use it to compare two pieces of content with custom dimensions:

import ComparisonSlider from 'duality-comparison-slider'

function App() {
  return (
    <ComparisonSlider
      height={300}
      width={350}
    >
      <ComparisonSlider.Before>
        <div
          style={{
            backgroundImage:
              'url("https://images.unsplash.com/photo-1729366790976-81844c8dd310?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'white',
          }}
        >
          Before Content
        </div>
      </ComparisonSlider.Before>
      <ComparisonSlider.After>
        <div
          style={{
            backgroundImage:
              'url("https://images.unsplash.com/photo-1723675747885-84f60ccc4db8?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'white',
          }}
        >
          After Content
        </div>
      </ComparisonSlider.After>
    </ComparisonSlider>
  )
}

export default App

Props

Prop	Type	Default	Description
width	number	500	Width of the slider container in pixels.
height	number	500	Height of the slider container in pixels.

Development

To build the component from the source, use:

npm run rollup

Contributing

Feel free to contribute to Duality by reporting issues, suggesting new features, or submitting pull requests. Contributions are welcome!

License

Licensed under the ISC License.