入力タイプ範囲の場合、オンチェンジの終了時にイベントをトリガーします

Question

入力タイプ範囲に対してイベントをトリガーまたはオン・イベントの終了を検出する方法。

$('.slider').on('change',function(e){ 
     console.log(e.target.value); 
}); 

これで、範囲入力のドラッグを開始すると、コンソールログが返されます。私はonchangeイベントの終わりに価値を得たいと思っていました。これを達成する方法は？

はありがとう;）

Answer 1

ちょっとぐららんで、debounceの機能をお試しください。イベントハンドラの起動を遅らせるので、入力値をonchangeイベントの最後に取得できます。 Lodash has a implementation of the debounce機能を使用できます。

$range.on('change', _.debounce(function() { 
    $display.text($(this).val()); 
}, 250)); 

ここでは少しdemoです。

Answer 2

あなたがあればこれはmouseupとmousedownイベントを使用して、上記の例のように完全な答えのために、この

var prevValue = 0; 
 
$('.slider').on('change',function(e){ 
 
     
 
}); 
 
// mouse down to check for previous value 
 
$('.slider').on('mousedown',function(e){ 
 
     prevValue = $(this).val(); 
 
}); 
 
// mouse up when the mouse up from the slider with end value 
 
$('.slider').on('mouseup' , function(){ 
 
    var ThisValue = $(this).val(); 
 
    if(ThisValue !== prevValue){ // check new value with previous value 
 
    \t alert('Value Changed'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="slider" type="range" min="0" max="100"/>

ようmousedownとmouseup何かを使用することができます以前の値と新しい値を比較する必要があります。JYoThIと言っています。ハンゲイベントは、範囲の最後の値を取得するのに十分である

あなたがリアルタイムに

$('.slider').on('change',function(e){ 
 
     console.log($(this).val()); 
 
}); 
 

 
//update sliderCount div with real time value 
 
$('.slider').on('input',function(e){ 
 
     $('.sliderCount').text($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="slider" type="range" value="50" min="0" max="100"/> 
 
<div class="sliderCount">50</div>

ワーキングデモをdivの値を更新する必要がある場合は、inputイベントを使用することができます追加情報