0

I have my web app working fine with computers, but can't seem to get it to work on mobile phones mainly because the onmouseup isn't being fired off. So I added the touchend event thinking it would be the same, but it didn't help. How do I get the same behavior of onmouseup on the phone?

Basically, I have a range slider and I want the release slider part of it to work on phones 

  <input id="slider" class="slider" type="range" min="0" max="100" value=50 onmouseup="handleSubmit()" touchend="handleSubmit()"/>

I've tried it on mobile safari and chrome... neither work

Joshua Segal
  • 541
  • 1
  • 7
  • 19

2 Answers2

1

You don't need to rely on mouseup nor touchend. The input element offers another event which comes in handy: onchange.

This input fires as soon the input's value changed - because the user released the slider.

Here's an example:

function handleSubmit(e) {
  console.log(e.value)
}
<input id="slider" class="slider" type="range" min="0" max="100" value=50 onchange="handleSubmit(this)" />
obscure
  • 11,916
  • 2
  • 17
  • 36
0

I'm stupid... it's supposed to be ontouchend

<input id="slider" class="slider" type="range" min="0" max="100" value=50 onmouseup="handleSubmit()" touchend="handleSubmit()"/>

still new to js haha

Joshua Segal
  • 541
  • 1
  • 7
  • 19