ngx-custom-captcha

A lightweight, customizable slider CAPTCHA component for Angular, built to prevent bots and ensure user interaction in a visually intuitive way.

✨ Features

• ✅ Slider-based puzzle CAPTCHA
• 🧩 Configurable background and puzzle images
• ♿ Accessible and keyboard-friendly
• ⚡ Lightweight and performant
• 🔧 Works with Angular standalone components

🚀 Installation

Install via npm:

npm install ngx-custom-captcha

import { NgxCustomCaptchaComponent } from 'ngx-slider-captcha';

@Component({
  standalone: true,
  imports: [NgxCustomCaptchaComponent],
  ...
})
export class YourComponent {}

## HTML

<ngx-custom-captcha
  [background]="backgroundUrl"
  [puzzleImg]="puzzleUrl"
  [pieceSizeRatio]="0.15"
  [positionRatioY]="0.6"
  [bgWidth]="300"
  [bgHeight]="150"
  [message]="'Slide to verify'"
  [disabled]="false"
  [error]="loadError"
  (solved)="onCaptchaSolved($event)"
  (refreshRequested)="refreshCaptcha()"
></ngx-custom-captcha>

```md
## 📥 Inputs

| Input            | Type      | Description                                     |
| ---------------- | --------- | ----------------------------------------------- |
| `background`     | `string`  | URL of the CAPTCHA background image             |
| `puzzleImg`      | `string`  | URL of the puzzle piece image                   |
| `pieceSizeRatio` | `number`  | Size ratio of the puzzle piece (e.g. `0.15`)    |
| `positionRatioY` | `number`  | Y-axis position ratio of the piece              |
| `bgWidth`        | `number`  | Original width of the background image          |
| `bgHeight`       | `number`  | Original height of the background image         |
| `message`        | `string`  | Instructional text (shown before drag)          |
| `disabled`       | `boolean` | Disables user interaction                       |
| `error`          | `boolean` | If true, shows an error message on load failure |

## 📤 Outputs

| Output             | Returns                 | Description                                |
| ------------------ | ----------------------- | ------------------------------------------ |
| `solved`           | `{ positionX: number }` | Emitted with the final solved X position   |
| `refreshRequested` | `void`                  | Emitted when the refresh button is clicked |