1.0.4 • Published 5 months ago

slider-before-after v1.0.4

Weekly downloads
32
License
MIT
Repository
github
Last release
5 months ago

slider-before-after

node version npm version downloads count size license

šŸ”Ø Lightweight and simple slider to present images in "before / after" style with no dependencies.

Preview šŸŽ‰

https://piecioshka.github.io/slider-before-after/demo

or below:

npm.io

Features

  • āœ… Display images in before / after style
  • āœ… Use CSS Level 4 (CSS Variables)
  • āœ… Small size of package
  • āœ… No dependencies
  • āœ… Fully customizable

Usage

Installation:

npm install slider-before-after

In HTML structure:

<div class="slider-before-after">
    <div class="slider-before-image">
        <img src="https://placeskull.com/200/200/5CBB88" alt=""/>
    </div>
    <div class="slider-after-image">
        <img src="https://placeskull.com/200/200/435466" alt=""/>
    </div>
    <input type="range" class="slider-track"/>
</div>

and then attach files:

<head>
    <link rel="stylesheet" href="node_modules/slider-before-after/src/styles/main.css"/>
    <link rel="stylesheet" href="node_modules/slider-before-after/src/styles/custom-range-input.css"/>
</head>
<body>
    ...
    <script src="node_modules/slider-before-after/src/scripts/slider-before-after.js"></script>
</body>

or in component:

require('slider-before-after/src/styles/main.css');
require('slider-before-after/src/styles/custom-range-input.css');
require('slider-before-after');

License

The MIT License @ 2018