HTML输入范围 slider 停止滑动时调用函数

Question

我有一个用 HTML 实现的 slider :

<input type="range" onchange="app.setSpeed()" name="slider1" id="slider1" value="0" min="0" max="255" />

它逐渐调用我的函数app.setSpeed()。但我怎样才能 在释放 slider 时调用该函数？我看到应该存在类似 on-handle-up 的东西，但这在我的 HTML 版本中不起作用。

Answer 1

可以使用 jQuery .click() 或 .change() 函数:

$('#range').change(function() {
  $('div').html( $(this).val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="range">
<div></div>

Fiddle

---

您也可以使用纯 **JavaScript* 来完成:

function addEvent(el, name, func, bool) {
	if (el.addEventListener) el.addEventListener(name, func, bool);
	else if (el.attachEvent) el.attachEvent('on' + name, dunc);
	else el['on' + name] = func;
}
addEvent(range, 'change', function(e) {
	myText.innerHTML = e.target.value;
}, false);

<input type="range" id="range">
<div id="myText"></div>

Fiddle

---

希望有所帮助。