oninput and onchange do not work on second handle

[kmrastegar]

Is there a way around this? the events only fire when I move the first handle

[gnapse]

I have the same problem. Any workarounds?

[jrunning]

Since WHATWG has abandoned the proposal for a multiple attribute for <input type="range">, I suspect @LeaVerou has understandably lost interest in maintaining this. However, a workaround is pretty easy.

The problem is that when you add an event listener to your <input>, it isn't automatically added to the second handle, which is rendered by a separate, generated "ghost" <input>. The solution is to manually bind your event listener to that element. I've done it like this:

function handleChange() {
  console.log('Range is %s to %s', this.valueLow, this.valueHigh);
}

const input = document.querySelector('input[type=range]');
input.addEventListener('input', handleChange);
input.nextElementSibling.addEventListener('input', handleChange.bind(input));

You can see it in action in this Stack Overflow answer. You must ensure that this code runs after multiselect loads, since it depends on input.nextElementSibling being the "ghost" input.

[hakassem]

Hello,
The issue is related to the clone of node. the node use the same ID.
To resolve this issue you need to update the code and and add a suffix to the second ID.
After this line:
var ghost = input.cloneNode();
Please add:
ghost.id=ghost.id+"@clone" ;// HK update to avoid Id conflict

To trigger events on both sliders:
use in the html:

first slider Id= ranger@filter@dates
second slider ID = ranger@filter@dates@clone
var processSlider = function () {
console.log('Triggered!!')
}
window.onload = function(){
document.getElementById('ranger@filter@dates').oninput=processSlider
document.getElementById('ranger@filter@dates@clone').oninput=processSlider
}

[chriswheeler]

I fixed this by making the ghost change event trigger change on the original:

jQuery example but the same should be possible in pure JS:

$(document).on('change', 'input[type=range].multirange.original', function() {
	console.log(this.valueLow + ' - ' + this.valueHigh);
});
$(document).on('change', 'input[type=range].multirange.ghost', function() {
	$('input[type=range].original', $(this).parent()).trigger('change');
});