This is a message.

Minimal setup for rangeinput

standalone demo

Change the value by dragging the handle, clicking on the slider or changing the value of the input field. When you focus on the input you can change the value with the arrow keys or with VIM keyboard shortcuts (HJKL). Page UP/DOWN goes 10 steps forward/backward.

The code

Here is all code you need for the above example: 

  <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  
  <!-- rangeinput styling -->
  <link rel="stylesheet" type="text/css"
        href="/media/css/rangeinput/skin1.css"/>
 
  <!-- HTML5 range input -->
  <input type="range" name="test" min="100" max="300" value="150" />
 
  <!-- make it happen -->
  <script>
    $(":range").rangeinput();
  </script>

HTML

The HTML5 range input is now powered by a jQuery Tools cross-browser implementation that can be skinned with CSS. For browsers that implement range inputs natively, the input field's type is changed to text so that the native version does not get in the way. It is only being displayed if JavaScript is disabled.

You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.

Skinning with CSS

Here we use the following CSS file for the look and feel. Take a look at the skinning documentation to understand how it works.