完成滑动输入类型=“范围”后触发函数

Trigger a function after finishing sliding input type="range"

本文关键字：范围 函数 输入 类型      更新时间：2023-09-26

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

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

当用户滑动范围输入字段指针时，.onclick不起作用（或者你可以在那里滑动的小东西怎么称呼？），并且光标在滑块上方或下方停止滑动。

明白我的意思吗？

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

使用onmouseup而不是onclick，当您释放滑块的手柄时，无论光标位置如何，它都会触发。

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

检查这个小提琴

您可以使用

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。这将更新滑块的值。

我希望我能帮助你！
相关文章：