Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
img-comparison-slider
Advanced tools
Slider component to compare images before and after.
IE / Edge | Firefox | Chrome | Safari | iOS Safari | Samsung |
---|---|---|---|---|---|
IE11 (limited), Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
This is the best comparison slider because it:
<script type="module" src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.js"></script>
<link rel="stylesheet" href="https://unpkg.com/img-comparison-slider@latest/dist/collection/styles/initial.css">
<img-comparison-slider>
<img slot="before" src="before.jpg">
<img slot="after" src="after.jpg">
</img-comparison-slider>
The component could be styled with the help of CSS3 variables.
Example:
<style type="text/css">
img-comparison-slider {
--divider: 3px solid #c0c0c0;
--hint-opacity: 0.3;
}
</style>
Variable | Description | Default value |
---|---|---|
--divider | Vertical line dividing before and after image | 1px solid #d7d7d7 |
--hint-size | Size of hint arrows at the middle of divider | 40px |
--hint-color | Color of hint arrows at the middle of divider | #d7d7d7 |
--hint-opacity | Opacity of hint arrows | 0.5 |
--hint-opacity-active | On focus opacity of hint arrows | 0 |
FAQs
Slider component to compare images before and after
The npm package img-comparison-slider receives a total of 15,538 weekly downloads. As such, img-comparison-slider popularity was classified as popular.
We found that img-comparison-slider demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.