oninput and onchange do not work on second handle about multirange HOT 4 OPEN

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.

from multirange.

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

from multirange.

I have the same problem. Any workarounds?

from multirange.

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
}

from multirange.