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

Fire function when input[range] value changes / thumb dragging

本文关键字：拖动 功能 输入 范围      更新时间：2023-09-26

我想在输入[范围]值更改时触发一个函数，但是，我也想在拖动范围拇指时触发相同的函数。

这个例子应该很清楚。

上面的例子工作正常，但是我觉得.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
});

// Try This
$('#cropSlider').change(function(){
     //  Your Code
});
相关文章：