{"id":17262792,"url":"https://github.com/brianmitchl/svelte-compare-image","last_synced_at":"2025-04-14T07:33:13.008Z","repository":{"id":73643000,"uuid":"446644905","full_name":"BrianMitchL/svelte-compare-image","owner":"BrianMitchL","description":"🖼 A Svelte component to compare two images with a slider to reveal one over the other","archived":false,"fork":false,"pushed_at":"2024-04-18T05:42:50.000Z","size":2968,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-19T23:49:13.838Z","etag":null,"topics":["compare-images","svelte"],"latest_commit_sha":null,"homepage":"https://projects.brianm.me/svelte-compare-image/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrianMitchL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-01-11T02:01:03.000Z","updated_at":"2025-01-16T07:09:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f27de4b-416e-4629-a36c-fc9aebf0fbea","html_url":"https://github.com/BrianMitchL/svelte-compare-image","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianMitchL%2Fsvelte-compare-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianMitchL%2Fsvelte-compare-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianMitchL%2Fsvelte-compare-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianMitchL%2Fsvelte-compare-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrianMitchL","download_url":"https://codeload.github.com/BrianMitchL/svelte-compare-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240170108,"owners_count":19759145,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compare-images","svelte"],"created_at":"2024-10-15T07:54:45.218Z","updated_at":"2025-02-24T22:30:55.264Z","avatar_url":"https://github.com/BrianMitchL.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-compare-image [![npm](https://img.shields.io/npm/v/svelte-compare-image)](https://www.npmjs.com/package/svelte-compare-image)\n\nA Svelte component to compare two images with a slider to reveal one over the other.\nFind the package on NPM at [svelte-compare-image](https://npmjs.com/package/svelte-compare-image).\n\nAn interactive example can be found at https://projects.brianm.me/svelte-compare-image/\n\nThis component requires Svelte 4. Use version 2 to support Svelte 3.\n\n![screen recording example](example.gif)\n\nChanges are run inside of `requestAnimationFrame` to improve performance and reduce lag.\n\n## Docs\n\nThe component will display the images and fill available width and height the aspect ratios of the first image.\n\nTo use it, render the component as seen below, providing image src and alt text for the left and right images.\nThe following CSS custom properties are optional and can be set to customize the appearance of the slider.\n\n### Props\n\n| Property                    | Default Value        |\n| --------------------------- | -------------------- |\n| `--handle-size`             | `2.5rem`             |\n| `--handle-background-color` | `rgba(0, 0, 0, 0.6)` |\n| `--handle-background-image` | _see below_          |\n| `--handle-border-width`     | `0.125rem`           |\n| `--slider-color`            | `#ffffff`            |\n| `--slider-width`            | `0.125rem`           |\n\nDefault thumb background image:\n\n```css\nurl('data:image/svg+xml;utf8,\u003csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpath d=\"M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003c/svg\u003e')\n```\n\nIt looks like this (shown with `darkgray` for viewing here, it is white in the component)\n\n![slider icon](slider-icon.svg)\n\n### Slots\n\n`CompareImage` has one named slot, `slider-label`, which is used to label the\nslider control. It is displayed in a visually hidden `span`. The default value\nis the following:\n\n\u003e Set the visibility of one image over the other. 0 is full visibility of\n\u003e the second image and 100 is full visibility of the first image. Any\n\u003e amount in-between is a left/right cutoff at the percentage of the\n\u003e slider.\n\n## Example\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { CompareImage } from \"svelte-compare-image\";\n  // or\n  import CompareImage from \"svelte-compare-image/CompareImage.svelte\";\n\n  // too many quotes to deal with, storing as a variable is easier\n  const handleBackgroundImage = `url('data:image/svg+xml;utf8,\u003csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpath d=\"M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003c/svg\u003e')`;\n\u003c/script\u003e\n\n\u003cCompareImage\n  imageLeftSrc=\"https://via.placeholder.com/600x400/ffaa00/ffffff/?text=Example+Text\"\n  imageLeftAlt=\"left\"\n  imageRightSrc=\"https://via.placeholder.com/600x400/00aaff/ffffff?text=Example+Text\"\n  imageRightAlt=\"right\"\n  --handle-size=\"2.5rem\"\n  --handle-background-color=\"rgba(0, 0, 0, 0.6)\"\n  --handle-background-image={handleBackgroundImage}\n  --handle-border-width=\"0.125rem\"\n  --slider-color=\"#ffffff\"\n  --slider-width=\"0.125rem\"\n\u003e\n  \u003csvelte:fragment slot=\"slider-label\"\u003e\n    Set the visibility of one image over the other. 0 is full visibility of the\n    second image and 100 is full visibility of the first image. Any amount\n    in-between is a left/right cutoff at the percentage of the slider.\n  \u003c/svelte:fragment\u003e\n\u003c/CompareImage\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianmitchl%2Fsvelte-compare-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianmitchl%2Fsvelte-compare-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianmitchl%2Fsvelte-compare-image/lists"}