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'] = $randomNumber2;
?>

The first line after the PHP opening tag <?php is a call to the session_start function (which you will remember from the previous CAPTCHA implementation). In the next two lines, we generate two random numbers...