输入[范围]值更改/拇指拖动时触发功能

Question

我想在输入[范围]值发生变化时触发一个函数，但是，我也想在拖动范围缩略图时触发相同的函数。

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>

编辑：您可能需要点击＆＃34;运行JS＆＃34;在示例链接上，显示蓝色进度条。奇怪的行为JSBin。

Answer 1

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

Answer 2

// Try This
$('#cropSlider').change(function(){
     //  Your Code
});