72

Currently the onChange event on my range inputs is firing at each step.

Is there a way to stop this event from firing until the user has let go of the slider?

I'm using the range to create a search query. I want to be able to run the search every time the form is changed but issuing a search request at each step of the slider's movement is too much.


Here's the code as it stands:

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 that help?

1
  • 8
    This is a bug in the implementation by WebKit and IE due to a ambiguity in the HTML spec. The spec has since been clarified that the 'change' event should not fire until the knob is released. To get values as the user is sliding the knob, the 'input' event should be used. However, WebKit and IE have not yet fixed this implementation bug. HTML spec revision: html5.org/tools/web-apps-tracker?from=7786&to=7787 Sep 11, 2013 at 21:57

12 Answers 12

73

Use for final selected value:

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

Use to get incremental value as sliding:

$(".slider").on("input", function(){console.log(this.value)});
1
  • 2
    This works fine in Firefox and Chrome, but not on Safari. Safari triggers the change event while you're sliding. At least until they get around to implementing the fix based on the amended standard.
    – baohouse
    Aug 14, 2014 at 18:57
14

Bit late, but I had the same problem the other day. 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 'changed' event instead.

1
  • 2
    This is a good workaround but has the disadvantage of trigger 'changed' on all elements responding to selector ".slider" each time only one on them actually change. I modify your exemple : (function($el, timeout) { var timer; $el.bind("change", function() { var $me = $(this); if (timer) { clearTimeout(timer); } timer = setTimeout(function() { $me.trigger("changed"); }, timeout); }); })($(.slider), 500);
    – Fluxine
    Jan 9, 2014 at 10:35
9

Bah!

Use onmouseup event Rather then onChange

2
  • 4
    I had considered that but decided against it for two reasons: it's clunky to deal with slider values that aren't changed (minor) and I can't assume that people will be using a mouse to edit the form (major). I still have no proper answer to the question but I feel bad about not marking any answer as correct; they're correct (as in, they work) but they don't really answer the question. Jul 18, 2011 at 9:10
  • 2
    You also need to add the events: onkeyup (in case the keyboard is used) and ontouchend (in case a touchscreen is used).
    – iRon
    Apr 13, 2017 at 20:08
6

One problem is that AFAIK the HTML5 doesn't define when the onchange event is supposed to fire, so it is most likely different from browser to browser. And you also have to consider, that a browser doesn't actually have to render an input type=range as a slider.

Your only choice is that you have to build in a mechanism to make sure that your search isn't triggered too often, for example, check if a search is currently running and abort if it is, or make sure that searches are triggered at a maximum of every x seconds.

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; }
5

Pure JS here:

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

or

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

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

Usage:

//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));

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);
        }
    };
};
1

Here's what I use for capturing 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 the range slider if you want to return its value when it has been clicked (or even dragged). Think of it like a 'mouseup' event. (I did try that but the slider didn't stop after I had 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 appropriate.

Hope this helps.

1

I use several HTML5 default sliders in the same page with the following setup:

  • Output tag in the page changes value when the slider is moved using the oninput event
  • A change event is triggered once on release

Tested with the latest Chrome and compiles well on a Raspberry with 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"/>

A simple Javascript code creates the listeners. You might need to try different events instead of 'change' in the last line to see what fits 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);
    }
}
0

another suggest:

$(".slider").change(function(){    
  if (this.sliderTimeour) clearTimeout(this.sliderTimeour);
  this.sliderTimeour = setTimeout(function(){
    //your code here
  },delayTimeHere);
});
1
  • This code seems to conflict with jQuery 1.9.1 as it keeps throwing an error. I found Arwyn's answer below to work however. Jan 27, 2014 at 15:14
0

You can try to use blur event. Of course it also has it's limitations but it's just another suggestion :)

You can also try to combine the blur, onkeyup and onmouseup events to try to catch different situations: blur when the user makes the selection with keybord arrows and hits <Tab>, onkeyup when the user makes the selections with keyboard and stays focused on the slider, and onmouseup when he uses the mouse. It might be even possible to only combine the onkeyup and onmouseup.

Still you will have to make a simple check if the value has changed or not and run neccessary code only after a change occured.

0

onchange works just fine , but I needed to update the value while sliding 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/

0

Let's add a simple ES6 alternative to the collection:

let timer;

const debounceChange = (value, callback) => {
    clearTimeout(timer);
    timer = setTimeout(() => callback(value), 500);
};

When used in JSX it would look like this:

<input type="range" onChange={e => debounceChange(e.target.value, props.onChange)}/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.