Slider CAPTCHA: Touch-friendly Image Puzzle JavaScript Library

SliderCaptcha is a self-hosted JavaScript library that adds an image puzzle slider CAPTCHA to browser forms. Your visitors drag a cutout piece into the matching gap before a registration, login, or other protected action continues.

Earlier versions used jQuery, but the current browser setup uses vanilla JavaScript and no longer needs Bootstrap. In Node.js apps, host the verification route behind remoteUrl; the browser challenge collects the drag data for that server check. 

Features

• Renders a slider-controlled image puzzle CAPTCHA for desktop and mobile pages.
• Removes the jQuery and Bootstrap requirements from the current browser setup.
• Loads puzzle images from a custom source through setSrc.
• Falls back to local images through localImages when the normal image request fails.
• Runs success, failure, and refresh callbacks during the verification flow.
• Resets an existing CAPTCHA instance through captcha.reset().
• Connects the captured drag trail to a server-side verification route.

Use Cases

• Login forms that show a visual challenge after repeated failed password attempts.
• Registration and password-reset screens that need a self-hosted interaction check before submission.
• Support, feedback, and checkout forms that use a local image catalog instead of a third-party CAPTCHA service.

How to use it:

1. Load the latest Font Awesome Iconic Font in the document.

<link rel="stylesheet" href="/path/to/fontawesome/css/all.css" />

2. Load the jQuery SliderCaptcha plugin's files in the document.

<link href="slidercaptcha.min.css" rel="stylesheet" />
<script src="longbow.slidercaptcha.min.js"></script>

3. Add an empty element where the CAPTCHA should appear. Keep the ID unique when a page contains more than one form.

<div class="slidercaptcha card">
  <div class="card-header">
    <span>Drag To Verify</span>
  </div>
  <div class="card-body">
    <div id="captcha"></div>
  </div>
</div>

4. Initialize the plugin. Pass the target element ID to sliderCaptcha(). Store the returned instance when the form needs to reset the challenge later. Note that the success callback should change only the browser state. Your server must still decide if it accepts the protected form request.

var captcha = sliderCaptcha({
  id: 'registration-captcha',
  onSuccess: function () {
    document.getElementById('submit-registration').disabled = false;
  },
  onFail: function () {
    document.getElementById('submit-registration').disabled = true;
  }
});

5. The default configuration uses a remote image source. Return local image paths from both callbacks when you want the image set under your own control.

var imagePaths = [
  '/assets/captcha/puzzle-1.jpg',
  '/assets/captcha/puzzle-2.jpg',
  '/assets/captcha/puzzle-3.jpg'
];

function getPuzzleImage() {
  return imagePaths[Math.floor(Math.random() * imagePaths.length)];
}

var captcha = sliderCaptcha({
  id: 'registration-captcha',
  setSrc: getPuzzleImage,
  localImages: getPuzzleImage,
  onSuccess: function () {
    document.getElementById('submit-registration').disabled = false;
  }
});

6. Connect A Server Verifier. Set remoteUrl to the application route that receives the slider trail. In a Node.js application, point it at an API handler that evaluates the request and returns the verification result.

var captcha = sliderCaptcha({
  id: 'registration-captcha',
  remoteUrl: '/api/captcha/verify',
  onSuccess: function () {
    document.getElementById('submit-registration').disabled = false;
  }
});

7. Use verify when your application needs to send the captured drag trail to its own verification endpoint. The callback receives the trail data and the URL set in remoteUrl. Let the server decide whether to accept the challenge before it processes the form.

var captcha = sliderCaptcha({
  verify: function (arr, url) {
    var ret = false;
    $.ajax({
      url: url,
      data: JSON.stringify(arr),
      async: false,
      cache: false,
      type: 'POST',
      contentType: 'application/json',
      dataType: 'json',
      success: function (result) {
        ret = result;
      }
    });
    return ret;
  }
});

8. All configuration options.

• id: Sets the ID of the target element that receives the CAPTCHA. Type: String. Default: Not specified.
• width: Sets the puzzle image width. Type: Number. Default: 280.
• height: Sets the puzzle image height. Type: Number. Default: 150.
• sliderL: Sets the puzzle piece width. Type: Number. Default: 42.
• sliderR: Sets the radius used for the puzzle-piece cutout. Type: Number. Default: 9.
• offset: Sets the accepted horizontal error tolerance in pixels. Type: Number. Default: 5.
• loadingText: Sets the message shown while the image loads. Type: String. Default: Loading....
• failedText: Sets the message shown after a failed verification. Type: String. Default: Try again.
• barText: Sets the instruction text beside the slider. Type: String. Default: Slide right to fill.
• repeatIcon: Sets the CSS class for the reload icon. The default class comes from Font Awesome. Type: String. Default: fa fa-redo.
• setSrc: Returns the next puzzle image URL. Type: Function. Default: A Picsum image URL.
• localImages: Returns a fallback puzzle image URL after the regular image request fails. Type: Function. Default: Returns a path from the bundled images/Pic*.jpg set.
• remoteUrl: Sets the server route used by the verification example. Type: String. Default: Not specified.
• verify: Defines custom verification behavior. The repository's server example uses verify(arr, url). Type: Function. Default: Not specified.

9. More callback functions.

var captcha = sliderCaptcha({
    onSuccess: function () {
      // ...
    },
    onFail: function () {
      // ...
    },
    onRefresh: function () {
      // ...      
    }
});

10. Reset the captcha.

captcha.reset();

Alternatives And Related Resources:

• captcha-lgh.js: Use a canvas-based alphanumeric CAPTCHA when a slider puzzle does not match the form flow.
• QapTcha: Review a legacy drag-confirmation CAPTCHA pattern for jQuery-based sites.
• Captcha Basic: Use a small math CAPTCHA for simple jQuery form checks.
• RVerify.js: Use a vanilla JavaScript image-rotation challenge for a different visual verification pattern.
• JS-Captcha: Use a native JavaScript numeric CAPTCHA when images and dragging are unnecessary.

Changelog:

2021-01-15

• JS Update

2020-11-30

• Removed jQuery and Bootstrap dependencies.

2019-09-11

• Bugfix

2019-06-07

• Fixed for Firefox

2019-05-21

• Fixed for IE 11

---

This awesome jQuery plugin is developed by ArgoZhang. For more Advanced Usages, please check the demo page or visit the official website.