完成滑动输入类型后触发功能=＆＃34;范围＆＃34;

Question

如何在滑动输入type="range"-pointer时触发值？ （当用户停止滑动到所需的值时）因为我不想获得原始值和期望值之间的值！

我用.onclick进行了一些实验，但这不是我想要的！

当用户滑动range-input-field-pointer时，

.onclick不起作用（或者你可以在那里调用那些小东西？）并且当停止时光标位于滑块的上方或下方滑动。

知道我的意思吗？

不知道如何用德语解释，所以英语更难！ ：/

Answer 1

使用onmouseup代替onclick，当您松开滑块手柄时，无论光标位置如何，它都会触发。

var slider = document.getElementById('yourSlidersId');
 slider.onmouseup= function(){
 console.log('changed!'); // your code
}

检查此Fiddle

Answer 2

您可以使用oninput执行此操作。我很努力地做了很长时间，但终于明白了。

示例：

<input type="range" id="q" class="input" min="0" max="10" step="1" oninput="outputUpdate(value)">

使用此功能自动更新滑块的值：

将<output for="q" id="output">// Your default value //添加到您的HTML

和

function outputUpdate(vol) {
document.querySelector('#output').value = vol;
}

给你的JS。这将更新滑块的值。

<小时/> 我希望我能帮到你！