npmpackage.info

Gathering detailed insights and metrics for img-comparison-slider

Other packages similar to img-comparison-slider

@img-comparison-slider/react

8.0.2

React wrapper for img-comparison-slider

@img-comparison-slider/vue

8.0.0

Vue wrapper for img-comparison-slider

@fostimus/react-img-comparison-slider

8.0.2

React wrapper for img-comparison-slider

@acf-comparison-slider/react

7.8.4

React wrapper for img-comparison-slider

Gathering detailed insights and metrics for img-comparison-slider

img-comparison-slider

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

8.0.6

666

MIT

TypeScript

1,930,810 1.7

Installations

npm install img-comparison-slider

Score

96.6

Supply Chain

100

Quality

76.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

3

Total

69

Closed

5

Merged

61

Issues

Open

10

Total

78

Closed

68

Releases

@img-comparison-slider/react-v8.0.2

Published on 06 May 2024

img-comparison-slider-v8.0.6

Published on 09 Dec 2023

img-comparison-slider-v8.0.5

Published on 26 Nov 2023

img-comparison-slider-v8.0.4

Published on 10 Nov 2023

img-comparison-slider-v8.0.3

Published on 10 Nov 2023

img-comparison-slider-v8.0.2

Published on 10 Nov 2023

View all 79 releases

Developer

sneas

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.10.0

NPM Version

10.2.3 Statistics

666 Stars

414 Commits

48 Forks

8 Watching

5 Branches

10 Contributors

Updated on 28 Nov 2024

Languages

TypeScript (62.02%)

JavaScript (16.55%)

SCSS (14.2%)

HTML (3.26%)

Shell (2.98%)

CSS (0.99%)

Total Downloads

Cumulative downloads

Total Downloads

1,930,810

Last day

21.4%

4,568

Compared to previous day

Last week

2.4%

22,701

Compared to previous week

Last month

17.6%

100,456

Compared to previous month

Last year

61.2%

921,743

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

img-comparison-slider

Slider Component for Comparing Images (Before and After).

Usage examples: https://img-comparison-slider.sneas.io/examples.html

Example

Most Important Features

Mobile friendly
Accessible
Responsive
Compact - less than 12 kB minified (Or less than 4 kB if gzipped)
Compatible with modern frameworks (React, Angular, Vue2, Vue3)
Distributed via CDN or NPM

Installation

Browser Requirements

Support for ECMAScript 2015 (ES6). Use Babel if needed.
Support for Custom Elements (V1) and ShadowDOM (V1). Use Polyfills if support for older browsers is needed.
Support for CSS Variables (Custom Properties). Polyfill it for IE11.

HTML

1<script
2  defer
3  src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"
4></script>
5<link
6  rel="stylesheet"
7  href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css"
8/>
9
10<img-comparison-slider>
11  <img slot="first" src="before.jpg" />
12  <img slot="second" src="after.jpg" />
13</img-comparison-slider>

Frameworks Support

Supported Attributes

Besides the default HTMLElement attributes such as class, tabindex, title, etc., img-comparison-slider supports:

Attribute	Description	Default	Available
`value`	Position of the divider in percents.	`50`	`0..100`
`hover`	Automatically slide on mouse over.	`false`
`direction`	Set slider direction.	`horizontal`	`horizontal`, `vertical`
`nonce`	Define nonce which gets passed to inline style.
`keyboard`	Enable/disable slider position control with the keyboard.	`enabled`	`enabled`, `disabled`
`handle`	Enable/disable dragging by handle only.	`false`	`true`, `false`

Events

The component emits slide event when the slider position is changed by user.

Styling

Some styling techniques and ideas can be found in examples.

The component elements like the default handle or the separator line could be styled using CSS3 variables.

Example:

1<style type="text/css">
2  img-comparison-slider {
3    --divider-width: 2px;
4    --divider-color: #c0c0c0;
5    --default-handle-opacity: 0.3;
6  }
7</style>

Available Variables

Variable	Description	Default value	Example value
`--divider-width`	Width of the vertical line separating both images	`1px`	`1em`
`--divider-color`	Color of the vertical line separating the two images	`#fff`	`rgba(0, 0, 0, 0.5)`
`--divider-shadow`	Shadow cast by the vertical line separating the two images	`none`	`0px 0px 5px rgba(0, 0, 0, 0.5)`
`--handle-position-start`	Handle position on the divider axis. In case the handle must be displaced off the center	`50%`
`--default-handle-width`	Width of the default handle	`50px`
`--default-handle-color`	Color of the default handle	`#fff`	`rgba(0, 0, 0, 0.5)`
`--default-handle-opacity`	Opacity of the default handle	`1`	`0.3`
`--default-handle-shadow`	Shadow cast by the default handle	`none`	`0px 0px 5px rgba(0, 0, 0, 1)`

Handle

The handle of the component can be changed by assigning the attribute slot="handle" to any element within img-comparison-slider.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More