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

Question

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

上面的例子工作得很好，但是我觉得 .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>

编辑：您可能必须在示例 link 上点击 "run JS" 才能显示蓝色进度条。奇怪的行为 JSBin.

Answer 1

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

Answer 2

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

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

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

javascript

jquery

input