OnChange for HTML5 Range

Question

Currently, the onChange event on my range inputs fires at every step.

Is there a way to stop this event from triggering until the user releases the slider?

I use a range to create a search query. I want to be able to run a search every time the form has been changed, but the search query at each step of the slider’s movement is too large.

---

Here is the code in its current form:

HTML:

<div id="page"> <p>Currently viewing page <span>1</span>.</p> <input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" /> </div> 

JavaScript:

 $(".slider").change(function() { $("#query").text($("form").serialize()); }); 

Does it help?

Answer 1

Use for the final selected value:

  $(".slider").on("change", function(){console.log(this.value)}); 

Use to get incremental value as moving:

 $(".slider").on("input", function(){console.log(this.value)}); 

Answer 2

A bit late, but the other day I had the same problem. Here is my solution using jQuery bind / trigger:

 (function(el, timeout) { var timer, trig=function() { el.trigger("changed"); }; el.bind("change", function() { if(timer) { clearTimeout(timer); } timer = setTimeout(trig, timeout); }); })($(".slider"), 500); 

Now just bind your function to the “modified” event.

Answer 3

Bah!

Use onmouseup event instead of onChange

Answer 4

One of the problems is that AFAIK HTML5 does not detect when the onchange event is onchange , so it is likely different from the browser by the browser. And you should also keep in mind that the browser should not actually display input type=range as a slider.

Your only choice is that you need to create a mechanism to make sure that your search does not start too often, for example, check if the search is currently being performed and if it is interrupted, or make sure that the search queries are triggered a maximum every x seconds .

A quick example for the latter (just a quick hack, untested).

 var doSearch = false; function runSearch() { // execute your search here } setInterval(function() { if (doSearch) { doSearch = false; runSearch(); } }, 2000); // 2000ms between each search. yourRangeInputElement.onchange = function() { doSearch = true; } 

Answer 5

Pure JS here:

 myInput.oninput = function(){ console.log(this.value); } 

or

 myInput.onchange = function(){ console.log(this.value); } 

Answer 6

Here I use to capture the “change event” for the html5 range slider:

HTML:

 <form oninput="output1.value=slider1.value"> <input type="range" name="slider1" value="50"/> <output name="output1" for="slider1">50</output> </form> 

JavaScript:

 var $slider = $('input[name="slider1"]'); $slider.bind('change', function(e) { e.preventDefault(); console.log($(this).val()); }); 

You can also bind the 'click' event to a range slider if you want to return its value when it was clicked (or even dragged). Think of it as a mouseup event. (I tried, but the slider did not stop after I clicked on the slider.)

JavaScript:

 $slider.bind('click', function(e) { e.preventDefault(); console.log($this).val()); } 

On a side note, this returns a string, so make sure you use 'parseInt ($ (this) .value ())' when necessary.

Hope this helps.

Answer 7

I use several default HTML5 sliders on the same page with the following setting:

• The output tag on the page changes value when you move the slider using the oninput event
• The change event is fired once upon release

Tested with the latest Chrome and compiles well on raspberries using Node and Socket.io.

 <output id="APIDConKpVal"></output>&nbsp; <input type="range" class="PIDControlSlider" min="0" max="1500" step="1" id="APIDConKp" oninput="APIDConKpVal.value=value"/> <output id="APIDConKiVal"></output>&nbsp; <input type="range" class="PIDControlSlider" min="0" max="2000" step="1" id="APIDConKi" oninput="APIDConKiVal.value=value"/> 

Simple Javascript code creates listeners. You may have to try different events instead of “change” in the last line to see what suits you.

 window.onload=function() { var classname = document.getElementsByClassName("PIDControlSlider"); var myFunction = function() { var attribute = this.getAttribute("id"); //Your code goes here socket.emit('SCMD', this.getAttribute("id")+' '+ this.value); }; for(var i=0;i<classname.length;i++){ classname[i].addEventListener('change', myFunction, false); } } 

Answer 8

gravediggin but if you need it check js throttle or debounce functions

Using:

 //resize events gets processed 500ms after the last Event addEventListener("resize", _debounce(function(){ foo;}, 500)); //resize events get processed every 500ms addEventListener("resize", _throttle(function(){ foo;}, 500)); 

the code:

 /*waits 'delay' time after the last event to fire */ _debounce = function(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; }; /* triggers every 'treshhold' ms, */ _throttle = function(fn, threshhold, scope) { threshhold = threshhold || 250; var last, deferTimer; return function() { var context = scope || this; var now = +new Date(), args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function() { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; }; 

Answer 9

another offers:

 $(".slider").change(function(){ if (this.sliderTimeour) clearTimeout(this.sliderTimeour); this.sliderTimeour = setTimeout(function(){ //your code here },delayTimeHere); }); 

Answer 10

You can try using the blur event. Of course, it also has limitations, but this is just another suggestion :)

You can also try to combine the blur , onkeyup and onmouseup to try to catch different situations: blur when the user makes a choice using the arrow keys and <Tab> keys, onkeyup when the user makes a choice from the keyboard and remains focused on the slider, and onmouseup , when he uses a mouse. Perhaps it would be possible to combine only the onkeyup and onmouseup .

However, you will need to do a simple check to see if the value has changed or not, and run the necessary code only after the change has occurred.

Answer 11

onchange works just fine, but I needed to update the value by shifting it.

 var interval; $("#rangeinput").mousedown(function(event){ interval = setInterval(function(){ $("#output").html($("#rangeinput").val()); console.log("running"); },150); }); $("#rangeinput").mouseup(function(event){ clearInterval(interval); }); 

http://jsbin.com/vibuc/1/