für input type Bereich

Question

, wie ein Ereignis triggern oder detektieren das Ende onChange Ereignis für input type Bereich.

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

Nun wird dies eine Reihe von Konsolen-Logs zurückgeben, wenn ich anfange, die Range-Eingabe zu ziehen. Ich wollte den Wert am Ende des Onchange-Ereignisses erhalten. Wie erreiche ich das?

Danke;)

Answer 1

Hey Gururaj können Sie versuchen debounce Funktion. Es verzögert die Zündung der Event-Handler, so dass Sie Ihren Eingabewert am Ende der onchange Veranstaltung erhalten können, wie Sie es wollen. Lodash has a implementation of the debounce Funktion, die Sie verwenden können.

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

Hier ist ein wenig demo für Sie.

Answer 2

Sie mousedown und mouseup so etwas wie dieses

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"/>

Für eine vollständige Antwort als Beispiel oben mit mouseup und mousedown Ereignisse dies, wenn Sie verwenden können, ist müssen einen vorherigen Wert mit einem neuen Wert vergleichen und wie JYoThI sagte ich denke auf c hange Ereignis ist genug letzten Werte des zulässigen Bereichs erhalten

Weitere Informationen Sie input Ereignis verwenden können, wenn Sie den div Wert auf Echtzeit-

Working Demo

$('.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>

aktualisieren müssen