<!-- include the Tools -->
<script src="jquery.tools.min.js"></script>
<style>
.slider {
background:#ff0000 url(/media/img/gradient/h30.png) repeat-x 0 0;
height:9px;
position:relative;
cursor:pointer;
border:1px solid #333;
width:500px;
float:left;
clear:right;
margin-top:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:inset 0 0 8px #000;
}
/* progress bar (enabled with progress: true) */
.progress {
height:9px;
background-color:#ff0000;
display:none;
opacity:0.6;
}
/* drag handle */
.handle {
background:#fff url(/media/img/gradient/h30.png) repeat-x 0 0;
height:28px;
width:10px;
top:-12px;
position:absolute;
display:block;
margin-top:1px;
border:1px solid #000;
cursor:move;
-moz-box-shadow:0 0 6px #000;
-webkit-box-shadow:0 0 6px #000;
-moz-border-radius:14px;
-webkit-border-radius:14px;
}
/* the input field */
.range {
border:1px inset #ddd;
float:left;
font-size:20px;
margin:0 0 0 15px;
padding:3px 0;
text-align:center;
width:50px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
<!-- rangeinput styling -->
<input type="range" name="test" min="20" max="600" value="150" />
<script>
$(":range").rangeinput();
</script>