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

})();

HTML5 ——range学习笔记,布布扣,bubuko.com

HTML5 ——range学习笔记