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