Question

HTML5 range元素取值怎么获取

Answer 1

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

})();

http://www.zhangxinxu.com/study/201008/html5-range-input.html

Answer 2

<script>
    //表示滑动条以显示值互相等于
    function slider_range(range,slider) {
        document.getElementsByName(range.replace(2,1))[0].value = slider;
    }
    function range_slider(range,slider) {
        document.getElementsByName(range.replace(1,2))[0].value = slider;
    }
</script>
<input name="demo1" type="number" width="60px" onchange="range_slider(this.name,this.value)" value="100">
<input name="demo2" type="range"  onchange="slider_range(this.name,this.value)" max="1000" min="0" value="100" step="1" >

Answer 3

<input type="range" id='r1'>

r=document.getElementById('r1');
s=r.value; //取值