html range input support

hello, i want to display numeric field as range like http://flowplayer.org/tools/release-notes/index.html#form

see disk size (GB) and number of processors dields, thats code of this fields:

<p>
  <label>disk size (GB)</label>
  <div class="slider">
    <div class="progress"></div>
    <a href="#" class="handle" style="left: 45.82px"></a>
  </div>
  <input class="range" id="" maxlength="-1" name="" size="0" tabindex="0" title="">
</p>

more info here http://flowplayer.org/tools/rangeinput/index.html

and simple demo http://flowplayer.org/tools/demos/rangeinput/index.html

<!-- include jQuery FORM Tools (or any other combination) -->
<script src="http://cdn.jquerytools.org/1.2.5/form/jquery.tools.min.js"></script>

<!-- rangeinput styling -->
<link rel="stylesheet" type="text/css" href="rangeinput.css"/>

<!-- HTML5 range input -->
<input type="range" name="test" min="100" max="300" value="150" />

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

now we can use only select list of allowed values for text or numeric field.

please, help me to know how i can realize this, if somebody like this idea we can do patch or standalone widget/module