UNPKG

slider-before-after

Version:

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

github.com/piecioshka/slider-before-after

piecioshka/slider-before-after

73 lines (53 loc) ā€¢ 2.04 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# slider-before-after [![node version](https://img.shields.io/node/v/slider-before-after.svg)](https://www.npmjs.com/package/slider-before-after) [![npm version](https://badge.fury.io/js/slider-before-after.svg)](https://badge.fury.io/js/slider-before-after) [![downloads count](https://img.shields.io/npm/dt/slider-before-after.svg)](https://www.npmjs.com/package/slider-before-after) [![size](https://packagephobia.com/badge?p=slider-before-after)](https://packagephobia.com/result?p=slider-before-after) [![license](https://img.shields.io/npm/l/slider-before-after.svg)](https://piecioshka.mit-license.org) šŸ”Ø 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: ![](./assets/demo.gif) ## Features - āœ… Display images in before / after style - āœ… Use CSS Level 4 (CSS Variables) - āœ… Small size of package - āœ… No dependencies - āœ… Fully customizable ## Usage Installation: ```bash npm install slider-before-after ``` In HTML structure: ```html <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: ```html <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: ```javascript 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](https://piecioshka.mit-license.org) @ 2018