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

})();

aaarticlea/png;base64,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" alt="" width="306" height="243" />