https://github.com/taufiqul7756/image-masking-slider
Image Masking Slider is an interactive web component that allows users to compare two images (black-and-white and colored) by sliding a draggable line across the images.
https://github.com/taufiqul7756/image-masking-slider
draggable nextjs tailwind-css typescript
Last synced: about 4 hours ago
JSON representation
Image Masking Slider is an interactive web component that allows users to compare two images (black-and-white and colored) by sliding a draggable line across the images.
- Host: GitHub
- URL: https://github.com/taufiqul7756/image-masking-slider
- Owner: Taufiqul7756
- Created: 2024-10-16T09:31:59.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T06:00:20.000Z (11 months ago)
- Last Synced: 2025-04-03T01:51:09.688Z (6 months ago)
- Topics: draggable, nextjs, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://image-masking-slider.vercel.app
- Size: 701 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image Masking Slider
Image Masking Slider is an interactive web component that allows users to compare two images (black-and-white and colored) by sliding a draggable line across the images. This feature is often used to highlight differences between two images or to reveal transformations.
## Features:
1. Draggable Slider: Users can drag a line horizontally to compare the two images side by side.
2. Button Controls: Left and right buttons provide additional control for moving the slider, improving accessibility and ease of use.
3. Responsive Design: The slider adapts to different screen sizes, ensuring a seamless experience across devices.
4. Customizable: Easily change the images or adjust slider styles using Tailwind CSS.
## Installation
```
- git clone https://github.com/Taufiqul7756/image-masking-slider.git
- cd image-masking-slider
- npm install
- npm run dev
```
```
- version 0.0.1 | 16 oct 2014
```