input { font-size: 14pxfont-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)
})()
最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，类似如下图这样：
原文地址 http://www.cnblogs.com/tnnyang/p/7073723.html
第一个是 P标签下的 a 标签的 样式第二个是 id="footer" 下面的a标签 的样式
第三个是 ol 和 ul 一起的样式
第四个是类.rangeText 下的img（图片） 的样式；
