Mark-up with HTML5 + CSS + JavaScript

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 :

Leave a Reply