npmpackage.info

@fostimus/react-img-comparison-slider

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

8.0.2

666

MIT

TypeScript

1,190 1.7

Installations

npm install @fostimus/react-img-comparison-slider

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

NPM Version

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,190

Last day

Compared to previous day

Last week

300%

Compared to previous week

Last month

-5.8%

Compared to previous month

Last year

249.1%

925

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@fostimus/img-comparison-slider

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

Other packages similar to @fostimus/react-img-comparison-slider

img-comparison-slider

8.0.6

Slider component to compare images before and after

rc-slider

11.1.7

Slider UI component for React

@img-comparison-slider/react

8.0.2

React wrapper for img-comparison-slider

@react-native-community/slider

4.5.5

React Native component used to select a single value from a range of values.