创建范围滑块，不使用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/

很容易遵循。 如果您有任何疑问，请评论：）。