Mastering jQuery UI

Creating the slider CAPTCHA

In our second implementation, we will use jQuery UI's slider component to create a CAPTCHA. Two numbers between 0 and 100 will be generated from the server and will be stored in session. In the page, a range slider with two handles from 0 to 100 will be displayed. The user will have to drag the slider handles and set the slider values so that they match the values generated from the server side.

Generating minimum and maximum values for the slider

Inside the Chapter5 folder, create a new file named sliderCAPTCHA.php and start by adding the following code to it:

<?php session_start(); $randomNumber1 = (string)rand(0, 49); $randomNumber2 = (string)rand(50, 100); $_SESSION['sliderMin'] = $randomNumber1; $_SESSION['sliderMax'] ...