Trigger a function after finishing sliding input type="range"

Question

How can I trigger the value at the end of sliding the input type="range"-pointer? (when the user stops sliding to the desired value) because I do not want to get the values ​​between the original value and the desired value!

I experimented a little bit with .onclick, but this isn't what I want!

.onclick does not work when the user is sliding the range-input-field-pointer (or how is the little thing called that you can slide there?) and the cursor is above or under the slider when stop sliding.

know what I mean?

don't know how to explain in german, so it's even harder in english! :/

Answer 1

Use onmouseup instead of onclick, it'll trigger regardless offthe cursor position when you release the handle of the slider.

var slider = document.getElementById('yourSlidersId');
 slider.onmouseup= function(){
 console.log('changed!'); // your code
}

check this Fiddle

Answer 2

You can use oninput to do this. I struggled to do this for a long time but finally got it.

Example:

<input type="range" id="q" class="input" min="0" max="10" step="1" oninput="outputUpdate(value)">

Auto update the value of the slider using this function:

Add <output for="q" id="output">// Your default value // to your HTML

and

function outputUpdate(vol) {
document.querySelector('#output').value = vol;
}

to your JS. This will update the slider's value.

---

I hope I helped you!