第二步：CSS

　　下面，我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。

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

　　第三步：JavaScript

　　最后，我们

　　检测我们的浏览器是否认识range input，如果不，显示提示。

　　当用户移动滑块的时候，动态改变output的值。

　　监听，当用户离开滑块，插入值，同时本地存储。

　　然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。

(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的皮毛，全当抛砖引玉，希望能对您的学习有所帮助!