Is it possible to fire the oninput event for HTML5 input sliders?

Question

I've got a HTML5 input slider that I'm changing via JavaScript (in my example I'm changing it with a jquery UI slider, but it's possible it could also be changed due to other user input, e.g. click this button for 1x, 2x zoom, etc.)

The slider has the oninput event attached to it, so that when the user changes the slider value, it then updates the user interface.

The problem is, that changing the value via JavaScript doesn't fire the oninput event, I've tried doing rangeInputRaw.oninput() which apparently works for textarea's but it just throws an error on the range input.

Here's an example of what I'm talking about:

http://jsfiddle.net/qc03cumt/1/

(if you slider the jQuery UI slider, you'll see the top HTML slider changing, but the value for it doesn't update, if you slide the HTML slider however, the value does update)

For future reference, the HTML looks like this:

<h1>Range Slider</h1>

<form action="">
    <p>Range current value <span id="range-current-value">N/A</span></p>
    <input type="range" min="0" max="100" class="range-input" id="range-input" />

    <p>Current value: <span id="currrent-value">N/A</span></p>
    <div class="slider" id="slider"></div>
</form>

And the JavaScript looks like this:

var currentValue = $("#currrent-value");
var htmlRange = $("#range-input");
var htmlRangeRaw = document.getElementById("range-input");

$("#slider").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        currentValue.html(ui.value);
        htmlRange.val(ui.value);
    }
});

var rangeInputRaw = document.getElementById("range-input");
var rangeInputOutput = document.getElementById("range-current-value");
rangeInputRaw.addEventListener("input", function(event) {
    console.log("change");
    rangeInputOutput.innerHTML = this.value;
})

As stated, the example uses jQuery UI, but it's also feasible you'd want to change the range input value on other user interactions, e.g. changing another form value or clicking a button.

I can't change the event listener from oninput to onchange as it needs to update incrementally, not when the user has finished their interaction.

Answer 1

If you don't mind changing "addEventListener" to "onInput = function" then check this link

$("#slider").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        currentValue.html(ui.value);
        htmlRange.val(ui.value);
        htmlRange[0].onInput();
    }
});
....
rangeInputRaw.onInput = function(event) {
    console.log("change");
    rangeInputOutput.innerHTML = this.value;
};