Pineapple Comparsion Slider

Touch, responsive, simple

A simple, responsive and touch friendly Comparsion Slider Webcomponent build with Stencil.

How to use it?

Npm

Include it in your project like this in the head of your index.html:

  <script src="https://unpkg.com/[email protected]/dist/comparsions-slider.js"></script>

Node Modules

• Run npm install pineapple-comparsions-slider --save
• Put a script tag similar to this in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Add Webcomponent with your image urls to your html file:

  <comparsions-slider
          id="123"
          before="https://raw.githubusercontent.com/bentzibentz/Comparsion-Slider/master/demo/before.png"
          after="https://raw.githubusercontent.com/bentzibentz/Comparsion-Slider/master/demo/after.png">
  </comparsions-slider>

License

MIT License

By bentzibentz