Problem

I have a range slider HTML input (<input type="range">) I’ve inherited that uses the rangeslider.js jQuery plugin to render it.

I’m re-integrating it into a Vue.js (v2.x) project and using v-model to bind to the input.

However, to change the range value the user doesn’t interact directly with the HTML element but a rendered overlay which in turn changes the input value.

The problem is the v-model value was not updating when the range overlay is dragged to change the value.

 

Solution

My inherited code contained the following event handlers on the input elements.

$document.on('input', 'input[type="range"]', function(e) {
	valueOutput(e.target);
});

 

I added the following bold line to the called valueOutput() function.

function valueOutput(element) {
	element.dispatchEvent(new Event('input'));
}

The dispatchEvent ensures Vue is now aware of the change to the input.

 

I found this solution vis this StackOverflow answer: https://stackoverflow.com/a/56348565/115704 (article “How to change v-model value from JS“).