javascript - 当输入[范围]值改变/拇指拖动时触发功能

Question

我想在输入[范围]值发生变化时触发一个函数，但是，我也想在拖动范围 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 的奇怪行为。

Answer 1

$('input[type=range]').on("input", function() {
 // blah
});