停止滑动时的HTML输入范围滑块调用功能

Question

我有一个用HTML实现的滑块：

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

它逐渐调用我的函数app.setSpeed()。但我怎么能 在滑块释放时调用该函数？我看到应该存在类似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

希望有所帮助。

Answer 2

您可以使用jQuery range slider，因为它提供了此类功能。