HTML :
<form method="post">
<input type="range" name="range" min="0" max="10" step="1" value="">
<output name="result"> </output>
</form>
CSS :
<style type="text/css">
input {
font-size: 14px;
font-weight: bold;
}
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
input[type=range]:after {
content: attr(max);
padding-left: 5px;
}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}
</style>
JavaScript :
<script type="text/javascript">
(function () {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// Determine if browser is one of the cool kids that
// recognizes the range input.
var o = document.createElement('input');
o.type = 'range';
if (o.type === 'text') alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
// Set initial values of the input and ouput elements to
// either what's stored locally, or the number 5.
range.value = cachedRangeValue;
result.value = cachedRangeValue;
// When the user makes a selection, update local storage.
range.addEventListener("mouseup", function () {
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
}, false);
// Display chosen value when sliding.
range.addEventListener("change", function () {
result.value = range.value;
}, false);
})();
</script>
Output :
