我想在输入[范围]值发生变化时触发一个函数,但是,我也想在拖动范围 slider 时触发相同的函数。
This example should make it clear.
上面的例子工作正常,但是我觉得 .on("click mousemove",
对 DOM 来说是难以置信的负担。是否有更好的方法来实现上述目标,而无需在每个鼠标上点击 DOM运动?
$('body').on("click mousemove", ".cropSlider", function() {
var self = $(this),
val = self.val(),
min = self.attr('min'),
max = self.attr('max'),
pos = Math.round(((val - min) / (max - min)) * 100);
style = "background-image: linear-gradient(to right, blue "+pos+"%, #eee 7%);";
console.log(pos);
$('.cropSlider').attr('style', style);
});
<div class="default">
<div class="cropMain" style="width:300px;height:300px"></div>
<input class="cropSlider" type="range" value="1" min="1" max="4" step=".01">
</div>
编辑:您可能必须在示例链接上点击“运行 JS”,才能显示蓝色进度条。 JSBin 的奇怪行为。
最佳答案
$('input[type=range]').on("input", function() {
// blah
});
关于javascript - 当输入[范围]值改变/拇指拖动时触发功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28005605/