jQuery Tools range input demo does not work for my Chrome or Firefox

I was trying this demo out locally. If succeeded I should be able to see something like this. However, all I saw was an editable box which says "NaN".

Here is what I have tried:

I copied the code given by their web page and saved it as a local html file. I opened it with Chrome and Firefox, but instead of seeing the scrollbar, I just saw a white box.
I went to their standalone demo and did an "View Page Source" with Chrome. I copied the entire html file, saved it locally, and opened it in Chrome and Firefox. The result is still the same.

Here is my current local html file:

<!DOCTYPE html>
<html>
<!--
   This is a jQuery Tools standalone demo. Feel free to copy/paste.
   http://flowplayer.org/tools/demos/

   Do *not* reference CSS files and images from flowplayer.org when in
   production Enjoy!
-->
<head>
  <title>jQuery Tools standalone demo</title>

    <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  <!-- standalone page styling (can be removed) -->
  <link rel="shortcut icon" href="/media/img/favicon.ico">
  <link rel="stylesheet" type="text/css"
        href="/media/css/standalone.css"/>

    <!-- rangeinput styling -->
  <link rel="stylesheet" type="text/css"
        href="/media/css/rangeinput/skin1.css"/>
</head>
<body>  <!-- HTML5 range input -->
  <input type="range" name="test" min="100" max="300" value="150" />

  <!-- make it happen -->
  <script>
    $(":range").rangeinput();
  </script>
</body>
</html>

What am I doing wrong?

Solution

When downloading the page, any HTML structure changes done by scripts are saved with in your file. If you look the request for the index.html file in your Network tab of the developer console, you can see that the content of the requested file differs from the actual downloaded file (besides scripts and stylesheets urls).

Copy the contents of the body from the requested index.html and your example will start working locally.