HTML5区域范围文本框实例页面

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; }

HTML代码：

<form method="post"> <h4>音量控制</h4> <input type="range" name="range" min="0" max="10" step="1" value="" /> <output name="result"> </output> </form>

JS代码：

(function() {
    var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; // 检测浏览器是否是足够酷 // 识别range input. var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。'); // 设置初始值 // 无论是否本地存储了，都设置值为5 range.value = cachedRangeValue; result.value = cachedRangeValue; // 当用户选择了个值，更新本地存储 range.addEventListener("mouseup", function() { alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。"); localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。"); }, false); // 滑动时显示选择的值 range.addEventListener("change", function() { result.value = range.value; }, false); })();