创建一个范围滑块，没有jQuery

Question

如何创建范围滑块，如下所示（仅限水平滑块）？每次用户移动滑块时，都应将值发送到JavaScript函数。

我不想使用jQuery或任何其他预制脚本。我想自己编码，所以我理解它。没有HTML5，因为它相当新，绝大多数人都不会使用支持HTML5的浏览器。

Answer 1

您可以使用HTML5的'范围'输入类型

Minimum value<input type="range" id="myrange" min="1" max="100" step="1" onchange="updateValue(this.value);> Maximum value

这是一个显示值的javascript函数：

<script type="text/javascript">
function updateValue(val) {
  alert(val) ;
}

Answer 2

你的意思是这样的吗？

html（5）：

min<input type="range" id="slider" min="1" max="10" > max
<div id="output"> </div>

javascript：

window.addEventListener("load", function(){
     var slider = document.getElementById("slider");
     slider.addEventListener("change", function(){
         document.getElementById("output").innerHTML = "value : " + this.value;
    });
});

jsfiddle：http://jsfiddle.net/z39Ne/3/

很容易理解。如果您有任何问题，请评论:)。